Significance of ng-repeat-start vs ng-repeat

Question

I am trying to understand the significance of ng-repeat-start over ng-repeat. The angular documentation provides the following example for ng

Answer 1

I thought I'd add my answer, as no one touched on a very important reason for having these directives available. ng-repeat will not work correctly in certain scenarios when using html tables. Using ng-repeat-start is the only way to accomplish certain things.

Imagine you want to display your data like this using html tables:

And this is your data set:

groups = [
    {
        name: "Group 1",
        customers: [
            {id: 123, name: "Foo Inc.", state: "NJ"},
            {id: 234, name: "Bar Co.", state: "AZ"}
        ]
    },
    {
        name: "Group 2",
        customers: [
            {id: 345, name: "Baz LLC", state: "CA"}
        ]
    }
];

Using ng-repeat-start and ng-repeat-end you can do this:

    

        
ID
        
Customer
        
State
    
    

        
{{group.name}}

    
    

        
{{customer.id}}
        
{{customer.name}}
        
{{customer.state}}
    

Notice the ng-repeat-end followed by another regular ng-repeat. This ends the matching ng-repeat-start but initiates another repeat on the customers array, since we are still in the original ng-repeat-start scope when calling ng-repeat-end, we still have access to the group object.

Keep in mind, this is a very trivial example, but as the table structure becomes more complicated, the only way to accomplish things like this is to use ng-repeat-start and ng-repeat-end