AngularJS: Error Undefined

Question

Что не так с этим кодом? Я ожидаю, что значение 1 будет напечатано на консоли, но вместо этого оно выдает ошибку, в которой указано, что self.list [0] не определен?

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> 
</script> 
<script type="text/javascript"> 
    angular.module('notesApp', []) 
     .controller('MainCtrl', ['ItemService', function(ItemService) { 
      var self = this; 
      self.list = function() { 
       return ItemService.list(); 
      }; 

      console.log(self.list[0].id); //<<-- why does it print undefined?? 

      self.add = function() { 
       ItemService.add({ 
        id: self.list().length + 1, 
        label: 'Item ' + self.list().length 
       }); 
      }; 

     }]) 
     .factory('ItemService', [function() { 
      var items = [ 
       {id: 1, label: 'Item 0'}, 
       {id: 2, label: 'Item 1'} 
      ]; 
      return { 
       list: function() { 
        return items; 
       }, 
       add: function(item) { 
        items.push(item); 
       } 
      }; 



     }]);  

Заранее благодарю всех, кто отвечает. Кроме того, старался не быть таким тупым, но SO не позволит мне поставить простое приветствие в начале вопроса ...

Answer 1

Потому что на данный момент self.list является функцией! Когда следующий выполняется,

self.list = function() { 
    return ItemService.list(); 
}; 

Как вы ожидаете там список, может быть вам нужно выполнить функцию - что-то вроде

self.list = function() { 
    return ItemService.list(); 
}(); 

Попробуйте просто!

console.log("see self.list=", self.list);