title: AngularJS Cordova Media Doesn't Always Play Next Song
body: <p>I'm using the Ionic Framework with AngularJS and the ngCordova Media Plugin: <a href="http://ngcordova.com/docs/plugins/media/" rel="nofollow">http://ngcordova.com/docs/plugins/media/</a></p>
  
  <p>I currently have two functions in my controller;</p>
  
  <ol>
  <li><p>Play - this function plays the chosen media src</p>
  
  <pre><code>  $scope.play = function(src) {
          media = $cordovaMedia2.newMedia(src, null, null, mediaStatusCallback);
          media.play(); 
          $scope.isPlaying = true;
          $ionicLoading.hide();
  
      }
    }
  </code></pre></li>
  <li><p>Next Song - this function gets the src of next song in the list by looking up the index of current song object and choosing the next object in the list.</p>
  
  <pre><code>$scope.nextSong = function (song_id) {
          var index = $scope.allsongs.indexOf(song_id);
          if(index &gt;= 0 &amp;&amp; index &lt; $scope.allsongs.length - 1) {
             $scope.nextsongid = $scope.allsongs[index + 1]
             $scope.playMusic($scope.nextsongid);  //the playMusic function just looks up the src of the song and parses to the play function
          }
  }
  </code></pre></li>
  </ol>
  
  <p>Here is the playMusic function which is called above:</p>
  
  <pre><code>    $scope.playMusic = function(music_id)
  {
      myService.getSongInfo(music_id)
      .then(function(data){
        $scope.cursong = data.results;
        $scope.play($scope.cursong.src);
      });
  };
  </code></pre>
  
  <p>And in my template, the next button just calls the nextSong function like so with the current song ID:</p>
  
  <pre><code>&lt;div class="next" ng-click="nextSong('{{cursong.id}}')"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem I'm facing is that when i press the next button first time, it plays the next song but when i press it again, it plays the same song again. It seems the 'currsong' value is not updated.</p>
  
  <p>This is what the 'allsongs' array looks like:</p>
  
  <pre><code>["1631922", "1502059", "1365874", "1607940", "1251204", "1233296", "1151847", "1119737", "1086438", "1078140", "1068172", "1065312", "845339", "799161", "316293", "306073", "299817", "1603940"]
  </code></pre>
  
  <p><strong>Update: I tried using an interval</strong></p>
  
  <p>I have an interval function which skips to next song when the time has reached the duration. I call the nextsong function there and it works perfectly. </p>
  
  <pre><code>    $scope.Timer = $interval(function () {
  
  $scope.cursongduration = $scope.cursong.duration;
  $scope.cursongid = $scope.cursong.id;
  
  
  if($scope.currduration &gt;= $scope.cursongduration){
      $scope.nextSong($scope.cursongid);
      }, 1000);
  };
  </code></pre>
  
  <p>So my question is why calling nextSong through the template button work as well? To me it seems like the cursong.id is not updated in the template after 1 time for some odd reason. I have also tried using cursongid variable which is set in the interval in the template button but no luck:</p>
  
  <pre><code>&lt;div class="next" ng-click="nextSong('{{cursongid}}')"&gt;&lt;/div&gt;
  </code></pre>