title: Multiple directives in a controller, only one can display at any time
body: <p>I have a controller here and two directives:</p>
  
  <pre><code>app.controller('ListCtrl', function($scope){
   $scope.audioOptions = {
                          audio: [{
                            file : "sound/world.mp3",
                            type: "mp3"
                          },
                          {
                            file : "sound/world.ogg",
                            type: "ogg"
                          }],
                          playOnclick : true,
                          playOnload: true
                        };
   $scope.textOptions={
                         text : "Bird",
                         audio: [
                          {
                            file : "sound/world.mp3",
                            type: "mp3"
                          },
                          {
                            file : "sound/world.ogg",
                            type: "ogg"
                          }],
                          playAudioOnClick : true
                       };                      
  });
  
  app.directive('rsTextComponent',['ngAudio',function(ngAudio){
     return {
      restrict:'E',
      replace:true,
      scope:{options:"=options"},
      controller:function($scope){
          //click to play
         $scope.playTextAudio = function(){
           if($scope.options.playAudioOnClick)
              {
                   ngAudio.play(audioCurrent);
              }
         }
      },
      template:'&lt;div class="textbar" ng-click="playTextAudio()"&gt;{{options.text}}&lt;/div&gt;'
  };
  }]);
  
  app.directive('rsAudioComponent',['ngAudio',function(ngAudio){
  return {
      restrict:'E',
      replace:true,
      scope:{options:"=options"},
      controller:function($scope){
          //click to play
         $scope.playAudio = function(){
           if($scope.options.playOnclick)
              {
                   ngAudio.play(audioCurrent);
              }
         }
      },
      template:'&lt;div class="audiobar"&gt;&lt;button ng-click="playAudio()"&gt;PLAY&lt;/button&gt;&lt;/div&gt;'
  };
  }]);
  </code></pre>
  
  <p>Then I render it in list.html:</p>
  
  <pre><code>&lt;div ng-controller="ListCtrl"&gt;
    &lt;rs-audio-component options="audioOptions"&gt;
    &lt;rs-text-component options="textOptions"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Seems all are ok, but the problem here is that, when I start to browse list.html, only one directive can render and display, the other one disappears. it's wired.
  Below are the steps I tested:</p>
  
  <p>When I comment out the rs-audio-component element and keep rs-text-component in list.html, then rs-text-component works properly. </p>
  
  <p>When I comment out the rs-text-component element and keep rs-audio-component in list.html, then rs-audio-component works properly. </p>
  
  <p>But when I keep them two in list.html, only rs-audio-component can display, rs-text-component disappears. </p>
  
  <p>Would anyone give some light? thx.</p>