Why don't ng-controller and ng-repeat work together inside the same tag in Angular JS?

Question

The following code does not work, since I used both ng-controller and ng-repeat inside the same tag. But if I use ng-repeat inside the child div, its working. Why?

**Not Working**
<div ng-controller="myController" ng-repeat= "object in objectArray">
{{object.State}}
{{oject.Capital}}
</div>


**Working**
<div ng-controller="myController" >
<div ng-repeat= "object in objectArray">
{{object.State}}
{{oject.Capital}}
</div>
</div>

Answer 1

Here:

Logical reason:

<div ng-controller="myController" ng-repeat= "object in objectArray">
{{object.State}}
{{oject.Capital}}
</div>

As you know, ng-repeat is a multiplication of the containing tag, so there will be many controllers on the same page:

<div ng-controller="myController" ng-repeat= "object in objectArray">
    lorem
    ipsum
</div>
<div ng-controller="myController" ng-repeat= "object in objectArray">
    lorem
    ipsum
</div>
<div ng-controller="myController" ng-repeat= "object in objectArray">
    lorem
    ipsum
</div>

So, therefore, you cannot use them in the same tag, you must separate them, as in the second example.

The main reason:

, , , ; angular, , ng-repeat, ng-if ng-model, , .

, AngularJS , , , , ng-repeat, , , . , , , .

AngularJS .

Answer 2

ng-repeat 1000, ng-controller - 500, , ng-repeat , objectArray, , - myController, , ng-repeat .

: 1