Angularjs custom directive child scope access parent scope method? -

i trying create carousel angularjs ans ui bootstrap. since carousel in ui bootstrap supports images, wan write own directive support youtube video.

i want video start play when video slide active, , pause when slide not active. pause carousel lopping when video playing. far have done first part can't pause carousel because can't access pause method of carousel scope.

my code:

html

<div carousel interval="5000">     <div slide ng-repeat="slide in slides" active="slide.active">         <img ng-if="slide.image" ng-src="{{slide.image}}" />         <div ng-if="slide.video" youtube="{{slide.video}}">         </div>     </div> </div> 

js

.directive('youtube', ['youtubeservice', function (youtubeservice) {     return {         link: function (scope, element, attrs) {             var player;             var playerready = false;             var playerstate;             var callback;              function createplayer() {                 player = new yt.player(element[0], {                     width: 450,                     height: 300,                     videoid: attrs.youtube,                     events: {                         onready: function (event) {                             playerready = true;                             if (callback != null) {                                 callback();                             }                         },                         onstatechange: function (event) {                             playerstate = event.data;                             if (playerstate === yt.playerstate.paused) {                                 //scope.$parent.play();                             }                         }                     }                 });             }              if (youtubeservice.ready) {                 createplayer();             } else {                 scope.$on('youtubeserviceready', function (event, args) {                     createplayer();                 });             }              scope.$watch('slide.active', function (active) {                 if (active) {                     if (playerready) {                         player.playvideo();                         //scope.$parent.pause();                     } else {                         callback = function () {                             if (scope.slide.active) {                                 player.playvideo();                                 //scope.$parent.pause();                             }                         }                     }                 } else if (playerready && (playerstate == yt.playerstate.buffering || playerstate == yt.playerstate.playing)) {                     player.pausevideo();                 }             });         }     }; }]); 

plunk: http://plnkr.co/edit/xcswsmfisoza7sqtqucg

ui bootstrap carousel code https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js

please help, tell me if i'm doing wrong. i'm new angularjs framework.thanks

the problem slide directive angular-ui-bootstrap has created isolated scope, scope.$parent in link function isn't scope of carousel, therefore can't access play , pause functions.

in link function, can carousel's scope calling scope() on carousel element:

var carouselscope = element.parent().parent().scope(); 

then, use carouselscope replace have put scope.$parent.

http://plnkr.co/edit/1hciqvtm1fd9rh0o8mtw