angularjs - Froogaloop Vimeo 'finish' event in a Angular directive -

i have problem triggering vimeo "finish" event in angular directive. vimeo video loading , play , pause functions working correctly.

my html code

<vimeo control-boolean="isplaying" vid="{{videoslist[id].code}}" pid="1"></vimeo> <button ng-click="prevvid()">prev</button> <button ng-if="isplaying" ng-click="status()">pause</button> <button ng-if="!isplaying" ng-click="status()">play</button> <button ng-click="nextvid()">next</button> <div class="videoinfo">   <h2>{{videoslist[id].title}}</h2>   <p>{{videoslist[id].discription}}</p> </div> 

my angularjs directive

directive('vimeo', function($sce) {   return {       restrict: 'ea',       replace: true,       scope: {         //assumes true means video playing         controlboolean: '='       },       template: '<iframe id="video"></iframe>',       link: function postlink(scope, element, attrs) {         attrs.$observe('vid', function(value) {           var url = "http://player.vimeo.com/video/" + attrs.vid + "?title=0&byline=0&portrait=0&api=1&autoplay=true";           element.attr('src', url);           var iframe = element[0],           player = $f(iframe);           player.addevent("ready", function() {                     player.addevent('finish', onfinish);           });           function onfinish() {             console.log("vimeo finish")           }         scope.$watch('controlboolean', function(){           if(scope.controlboolean){             player.api('play');           }           else{             player.api('pause');           }         });         });        }     };   }); 

in directive above line should trigger event, isn't:

player.addevent("ready", function() {           player.addevent('finish', onfinish); }); function onfinish(id) {   console.log("vimeo finish") } 

i used me directive: http://embed.plnkr.co/gkwnk3lhx0mr3lhpfqya/preview

and website of vimeo, read 'how trigger events': http://developer.vimeo.com/player/js-api

does see wrong?

you should add code finish , ready event inside this:

scope.$watch('controlboolean', function(){            if(scope.controlboolean){               player.api('play');               player.addevent("ready", function() {                    console.log("vimeo ready");                  player.addevent('finish', onfinish);               });          } else {            player.api('pause');          }        }); 

i modified plunker , worked me.