I have managed to sort it out finally, so I am answering my own question
just in case someone experiences a similar problem.
All I needed to do was to use 'track by $index' in ng-repeat. The problem
was caused by the data in the json having duplicates. Using track by $index
will enable ng-repeat to use the index number instead of the actual data
for identifying each record.
Taken from the angular documentation:
Tracking and Duplicates
When the contents of the collection change, ngRepeat makes the
corresponding changes to the DOM:
- When an item is added, a new instance of the template is added to the
DOM.
- When an item is removed, its template instance is removed from the DOM.
- When items are reordered, their respective templates are reordered in
the DOM.
By default, ngRepeat does not allow duplicate items in arrays. This is
because when there are duplicates, it is not possible to maintain a
one-to-one mapping between collection items and DOM elements.
If you do need to repeat duplicate items, you can substitute the default
tracking behavior with your own using the track by expression.
For example, you may track items by the index of each item in the
collection, using the special scope property $index:
<div ng-repeat="n in [42, 42, 43, 43] track by $index">
{{n}}</div>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
