Angular - Passing an object from one directive to another directive
<p>I am new to angular so apologies up front if a question is too newbie. I am trying to make a custom directive, and since I am already using an <a href="https://github.com/brandly/angular-youtube-embed">angular-youtube-embed</a> directive, inside my new directive, I need to pass a <code>player</code> object from <code>youtube-video</code> directive, to my new directive, for the function <code>playVideo</code> in my scope to use it. I wonder how to do that?
This is how my directive looks:</p>

<pre><code>angular.module('coop.directives')
.directive('youtubePlayer', function () {
    return {
        restrict: 'E',
        scope: {
          videoPlaying: '=videoPlaying',
          playVideo: '&amp;playVideo',
          playerVars: '=playerVars',
          article: '=article'
         },
        templateUrl : 'templates/youtube-player.html'
    };
}); 
</code></pre>

<p>This is my youtube-player.html:</p>

<pre><code>&lt;img ng-hide='videoPlaying' ng-src='http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg' class='cover'&gt;
&lt;youtube-video ng-if='videoPlaying' video-url='article.external_media[0].original_url' player='player' player-vars='playerVars' class='video'&gt;&lt;/youtube-video&gt;
&lt;div ng-hide='videoPlaying' class='iframe-overlay' ng-click='playVideo({player: player})'&gt;
  &lt;img ng-hide='videoPlaying' class='play' src='icons/play.svg'/&gt;
  &lt;img ng-hide='videoPlaying' class='playButton' src='icons/playRectangle.svg'/&gt;
&lt;/div&gt;
</code></pre>

<p>And this is the function from the controller that I would like to use in my directive:</p>

<pre><code>  $scope.playVideo = function(player) {
    $scope.videoPlaying = true;
    player.playVideo();
  };
</code></pre>

<p>Where <code>player</code> is an object of <code>youtube-video</code> directive that I am using from <a href="https://github.com/brandly/angular-youtube-embed">angular-youtube-embed package</a>.
So, whenever a user clicks on an element below, <code>$scope.videoPlaying</code> should become <code>true</code> and a <code>playVideo()</code> function should start the video:</p>

<pre><code>&lt;div ng-hide='videoPlaying' class='iframe-overlay' ng-click='playVideo(player)'&gt;
</code></pre>

<p>This is how I call my directive in the view:</p>

<pre><code>&lt;youtube-player video-playing="videoPlaying" play-video="playVideo()" player-vars="playerVars" article="article"&gt;&lt;/youtube-player&gt;
</code></pre>

<p>I should somehow pass a player object from youtube video to my new directive because now I get an error of:</p>

<blockquote>
  <p>ionic.bundle.js:26794 TypeError: Cannot read property 'playVideo' of
  undefined:</p>
</blockquote>