Why am I getting ngRepeat:dupes when sending data from an Array into a differently named Array?

Question

Error: ngRepeat:dupes Duplicate Key in Repeater

---

http://plnkr.co/edit/hZtIXkPM7dhpf4P7rd6W?p=preview

I have an array which ng-repeats a list of tags on the page. Next I have an ng-click which sends the tag data into the scope of another controller whois job it is to display those selected tags in another list.

It's easier to see the code in action in the plnkr above, but the basics are:

• the first tags Array is in the cnt controller
• when you click on a tag, it gets stored in the TagDetailsFactory service
• I then broadcast an event to the view controller to then call the getTagDetails function in TagDetailsFactory to retrieve the saved tags and store them into the viewTags array in the view controller.

This is where I'm getting the ngDupes error :(

However, the array in cnt is named $scope.tags = []; and the array in view is $scope.viewTags = [];

---

// Code goes here

angular.module('app', [])

.directive('tagDetails', function() {
  return {
    restrict: "E",
    link: function($scope, el, attrs) {
      // console.debug($scope, attrs);
    },
    scope:{
        tag:'=ngModel'
    },
    template: '<div ng-show="tag.showDetails">{{tag.details}}</div>'
  };
})

.controller('cnt', ['$scope',
                    '$rootScope',
                    'TagDetailsFactory',
                    function($scope,
                             $rootScope,
                             TagDetailsFactory) {
  $scope.tags = [];

  for(var i = 0; i < 100; i++) {
    $scope.tags.push(
      { name: 'Foo Bar ' + i, details: 'Details' + i }
    );
  }

  $scope.showTagDetails = function(t) {
    t.showDetails = true;
  }

  $scope.leaveTag = function(t) {
    t.showDetails = false;
  }

  $scope.sendTag = function(t) {
    TagDetailsFactory.saveTagDetails(t);
    $rootScope.$broadcast('updateView');
  }

}])

.factory('TagDetailsFactory', function() {

      var savedTags = [];

      var saveTagDetails = function(tag) {
        savedTags.push(tag);
      }

      var getTagDetails = function() {
        return savedTags;
      }

      return {
          saveTagDetails : saveTagDetails,
          getTagDetails  : getTagDetails
      };
})

.controller('view', ['$scope',
                     '$rootScope',
                     'TagDetailsFactory',
                     function($scope,
                              $rootScope,
                              TagDetailsFactory) {

  $scope.viewTags = [];

  $scope.$on('updateView', function() {
    console.log('updateView');
    var tags = TagDetailsFactory.getTagDetails();
    console.log(tags);
    $scope.viewTags.push(tags);
  });

  // $scope.showTagDetails = function(t) {
  //   t.showDetails = true;
  // }

  // $scope.leaveTag = function(t) {
  //   t.showDetails = false;
  // }

}]);

Answer 1

ng-repeat does not allow duplicate items (otherwise how can it keep track of them, if you wanted to updated something, for example?). " In order to deal with this problem, you can add track by $index to your ng-repeat value:

ng-repeat="data in dataset track by $index"

You can have it track by other values in your data also, but it needs to be unique.

Your Plunker