javascript - increment value on Angular directive template -

here issue, want apply directive template elements on page incremental value on them.

my problem value stays @ 0, tried many answers on stackoverflow didn't succeeded them, i'm quite new angular.

here directive:

app.directive('loader', function ($window) {  return {     restrict: 'e',     replace: true,     transclude: true,     controller: function($scope){         if (!$scope.counter)             $scope.counter = 0;         else             $scope.counter++;     },     template: '<div ng-class=\"({ \'display-opacity\' : ready{{counter}} })\" ng-transclude></div>', };  }); 

as requested, here pug template:

loader     | test loader     | test 

after reading docs transclude option, going write (see below), after playing around codepen, got more confused. think, trying rather difficult.

a quick (and maybe dirty) solution use service counter. https://codepen.io/anon/pen/vxwpxo

app.directive('loader', function(mycounter) {   return {     restrict: 'e',     replace: true,     scope: {},     template: '<div>{{opacity}}</div>',     link: function(scope) {       scope.opacity = mycounter.get();     }   }; });  app.factory('mycounter', function() {   var counter = 0;    return {     get: function() {       return counter++;     }   }; }); 

---

previous thoughts:

the transclude option changes way scopes nested. makes contents of transcluded directive have whatever scope outside directive, rather whatever scope on inside. in doing so, gives contents access outside scope.

note if directive did not create own scope, scope in scope.name = 'jeff'; reference outside scope , see jeff in output.

https://code.angularjs.org/1.4.6/docs/guide/directive

i don't know, if have controller outside directives counter defined. if yes, code in directive controller won't change value of counter (if i've understood docs correctly). if no, each directive instantiate own counter, , because hasn't been set yet if (!$scope.counter) true. , it's behaving differently if directive has isolated scope or not. i'm getting confused!