angularjs - update angular button after kinetics animation is finished -

i've created video player kinetics canvas. after click on play button kinetics animation starts , button changes pause. have play button again after animations finished. here code:

angular:

    $scope.ispreviewplaying = function(){        return preview != null && preview.isrunning();     }     $scope.playpreview = function(){          .....          preview.stop;     }     $scope.pausepreview = function(){       preview.stop();     } 

html:

    <button ng-click="playpreview()" ng-show="!ispreviewplaying()">      <button ng-click="pausepreview()" ng-show="ispreviewplaying()"> 

so i'm assuming you're using kinetic.tween right instead of kinetic.animation?

the difference tween fire , forget animation has start , endpoint (sounds have) , animation animation runs in loop.

you can use onfinish event property of kinetic.tween run whatever angularjs code need switch pause button play button:

var rect = new kinetic.rect({   x: 100,   y: 100,   width: 100,   height: 50,   fill: 'green',   stroke: 'black',   strokewidth: 2,   opacity: 0.2 });   var tween = new kinetic.tween({   node: rect,    duration: 1,   x: 400,   y: 30,   rotation: math.pi * 2,   opacity: 1,   strokewidth: 6,   scalex: 1.5,   onfinish: function() {     //angularjs code set button here.   } });