title: HTML5 Audio Player using AngularJs through $http Service
body: <p><strong>HTML View</strong></p>
  
  <pre><code>&lt;audio ng-src="{{vm.videourlsce}}" autoplay preload="auto" controls="controls" autobuffer&gt;&lt;/audio&gt;
  </code></pre>
  
  <p>Inside my controller get the data from remover server using $http service and update to player</p>
  
  <pre><code>var vm = this;
  vm.videourlsce = '';
  $http.get(SERVER.apiurl+"resources/get_resource/?id="+$stateParams.id)    
  .success(function(response){                    
       vm.resources = response.resource;                                          
       vm.videourl = vm.resources.url;                                                                          
  
  }).error(function(error){                    
      console.log("Resources error");
  });
  $scope.$watch('vm.videourl', function(newVal, oldVal){
     if (newVal !== undefined) {
         console.log("Old Val =&gt; "+oldVal);
         console.log("New Val =&gt; "+newVal);
         vm.videourlsce = $sce.trustAsResourceUrl(newVal);  
     }
  });
  </code></pre>
  
  <p>After getting service response, the audio URL bind to audio tag on src attribute and playing the audio. But the controls are not working. When I remove autoplay option from the audio tag, nothing will happen. Those controls are not working when clicking the play button.</p>
  
  <p>When I hard-code this URL instead of getting from service it works fine. Does anyone help to this?</p>