title: Directive failing within different views
body: <p>I am developing an app which has an streaming for music, I created a directive and put it in the main view -index.html- because I need that the user be able to stop and start the music once he decide.</p>
  
  <p>So, first, my directive</p>
  
  <pre><code>.directive('audioPlay', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attr) {
  
        scope.playOrPause = true;
  
        var player = element.children('.player')[0];
  
        scope.playMusic = function() {
          scope.playOrPause = false;
          player.play();
        }
  
        scope.stopMusic = function() {
          scope.playOrPause = true;
          player.pause();
        }
  
      }
    };
  });
  </code></pre>
  
  <p>then, I put the directive in index.html</p>
  
  <pre><code>  &lt;body ng-app="urbanet.app"&gt;
      &lt;ion-nav-bar&gt;
        &lt;ion-nav-back-button&gt;
        &lt;/ion-nav-back-button&gt;
  
        &lt;ion-nav-buttons side="right"&gt;
  
          &lt;audio-play&gt; &lt;!-- HERE STARTS --&gt;
            &lt;audio class="player"&gt;
              &lt;source src="http://fire.wavestreamer.com:9711/UrbanetRadio"/&gt;
            &lt;/audio&gt;
            &lt;button class="button button-clear"
                    ng-click="playMusic()"
                    ng-hide="!playOrPause"&gt;
              &lt;i class="fa fa-play fa-lg"&gt;&lt;/i&gt;
            &lt;/button&gt;
            &lt;button class="button button-clear"
                    ng-click="stopMusic()"
                    ng-show="!playOrPause"&gt;
              &lt;i class="fa fa-pause fa-lg"&gt;&lt;/i&gt;
            &lt;/button&gt;
          &lt;/audio-play&gt; &lt;!-- HERE ENDS --&gt;
  
        &lt;/ion-nav-buttons&gt;
  
      &lt;/ion-nav-bar&gt;
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
    &lt;/body&gt;
  </code></pre>
  
  <p>now, I have 3 views in this order: <code>tab-news.html</code>, <code>tab-promotions.html</code>, <code>tab-signup.html</code>. </p>
  
  <p>You are able to see the directive in the 3 views and also in the nested views which is awesome, but I have an issue with the <code>tab-promotions.html</code>, if the user call <code>playMusic()</code> in any view, the statement changes to that function and the music starts, but the statement never updates in the <code>tab-promotions</code>, in the other views you can stop and start the music once you want and the app has the proper behavior, but in the tab promotions you are still able to play and stop the music without taking care if the other views, this view is independent of the other views in that sense.</p>
  
  <p>It is hard to explain myself here, so in a resume: in every view except tab-promotions, the app has the proper behavior, if the music is sounding and you go to tab-promotions you are to play music also in that view so there will 2 sounds in the background, one for the other 2 views and 1 different for tab-promotions.</p>
  
  <p>It seems as if I need to do a model or something. What do you say community ? </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>this how it looks so far attached to the body, is the element on the right</p>
  
  <p><img src="https://i.stack.imgur.com/hlp0q.png" alt="enter image description here"></p>