Implementing id generator angularjs

Question

I was working on a grocery store list using angular js. I was trying to add an item to the list using id generator I was able to add the first item when entered in the input field but I was unable to add another random entered item to it.

I'm using underscore.js as an external library.

I'm getting an error like this: Error: ngRepeat:dupes Duplicate Key in Repeater

var app = angular.module('groceryapp',["ngRoute"])


  app.config(function($routeProvider){
      
      $routeProvider
      
        .when('/',{
            
            templateUrl: "view1.html",
            controller: "groceryctl"
            
        })
        
        .when('/additem',{
           
            templateUrl: "view2.html"
       
        })
        
        .when('/additem/:id',{
           
            templateUrl: "view2.html"
       
        })
        .otherwise({
         
          redirectTo: '/'
         
        })
  })



app.factory("Groceryservice", function(){
    
    var groceryservice = [];
    
    groceryservice.items =  [
               
               {id:1,completed:true,itemName:"Bread",dateMf:"03-05-2017"},
               {id:2,completed:true,itemName:"Unclechips",dateMf:"07-05-2017"},
               {id:3,completed:true,itemName:"So-sugarcandy",dateMf:"13-09-2014"},
               {id:4,completed:true,itemName:"Frestos",dateMf:"23-06-2015"},
               {id:5,completed:true,itemName:"Mr.john flour",dateMf:"17-04-2017"},
               {id:6,completed:true,itemName:"Gems",dateMf:"19-07-2015"},
               {id:7,completed:true,itemName:"Agrade-apples",dateMf:"15-08-2016"},
               {id:8,completed:true,itemName:"Pepsi",dateMf:"21-09-2017"},
               {id:9,completed:true,itemName:"Peanut-jam",dateMf:"19-11-2016"},
               {id:10,completed:true,itemName:"Mushrooms",dateMf:"06-11-2017"}
               
           ];
    
        groceryservice.getNewId = function() {
        
        if(groceryservice.newId) {
            groceryservice.newId++;
            return groceryservice.newId;
        }
        
        else{
            
            var maxId = _.max(groceryservice.items, function(entry){return entry.id;})
            
            groceryservice.newId = maxId.id + 1 ;
            return groceryservice.newId;
            
        }
    };
    

    groceryservice.save = function(entry){
        entry.id = groceryservice.getNewId();
        groceryservice.items.push(entry);
    }
    
   return groceryservice;
    
})


app.controller('groceryctl', ["$scope","$routeParams","$location","Groceryservice",function($scope,$routeParams,$location,Groceryservice){
 
 $scope.title="Gstore";
 
 $scope.items=Groceryservice.items;
 
 $scope.additem = { id:11,completed:true,itemName:"",dateMf:new Date() };
 
 $scope.save = function(){
     
     Groceryservice.save($scope.additem);
     
     $location = ('/');
     
 }
 
console.log($scope.items);

}])


app.controller('titlectl', ["$scope","Groceryservice",function($scope,Groceryservice){
 
  $scope.title=Groceryservice.items[0].itemName;
 

}]);

 <div class="col-sm-offset-2 col-sm-8">
          <ul class="list-group">
              <li class="list-group-item text-center clearfix" ng-repeat="item in items  | orderBy:'-dateMf' ">
                <span class="" style="font-size:18px;font-weight:bold;">{{item.itemName | uppercase}}</span>

             </li>
          </ul> 
        </div> 

Answer 1

The dupes error normally occurs when a duplicate item in the array in encountered by ng-repeat, to get around this add track by $index:

<li class="list-group-item text-center clearfix" ng-repeat="item in items track by $index | orderBy:'-dateMf' ">