AngularJS: unable to get variable value from ctrl scope to directive

Question

HostingCtrl:

function HostingListCtrl($scope, Hosting) { Hosting.all().success(function(data) { $scope.hostings = data; }); } 

HTML template:

  <pagination items-count="{{hostings.length}}" current-page="currentPage" items-per-page="{{itemsPerPage}}"></pagination> 

Directive

 admin.directive('pagination', function() { return { restrict: 'E', replace: true, templateUrl: "<%= asset_path('angular/templates/ui/pagination.html') %>", scope: { currentPage: '=', itemsCount: '@', itemsPerPage: '@' }, controller: function($scope, $element, $attrs) { console.log($scope); console.log($scope.itemsCount); }, link: function(scope, element, attrs, controller) { } }; }); 

I am trying to get the value of the itemsCount variable in a directive, but when I try to execute console.log, the value is empty. The strange thing is that when console.log is the entire area, it is there:

 Scope {$id: "005", $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null…} $$asyncQueue: Array[0] $$childHead: null $$childTail: null $$destroyed: false $$isolateBindings: Object $$listeners: Object $$nextSibling: Child $$phase: null $$prevSibling: null $$watchers: Array[3] $id: "005" $parent: Child $root: Scope currentPage: 1 itemsCount: "11" itemsPerPage: "5" this: Scope __proto__: Object 

Also when I check the HTML source

 <nav class="pagination" items-count="11" current-page="currentPage" items-per-page="5"> 

Answer 1

With the highlight region and the @ symbol, you need to use $attrs.$observe('itemsCount', function(value) { ... } .

See http://docs.angularjs.org/guide/directive#attributes

When the controller functions (and links) are first executed, the @ properties are not yet populated. You see the value in the log, because by the time you expand the $ scope object, the value has been filled.