title: Changing scope in event handler in Angular directive
body: <p>I need to dynamically change some scope variables after song in audio tag is finished. My problem is that scope.test is not affected by audio directive.</p>
  
  <pre><code>angular.module('playItApp', [])
  
      .controller('audioController', ['$scope', function($scope){
          $scope.test = 'songNotFinished';
      })
  
      .directive('audio', function(){
          return {
              restrict: 'E',
              link: function(scope, element, attrs){
                  element[0].onended = function() {
                      scope.test = 'songFinished';
                      this.load();
                  };
              }
          }
      });
  
  
  &lt;div ng-controller="audioController"&gt;
      &lt;h1&gt;{{ test }}&lt;/h1&gt;
      &lt;audio controls autoplay&gt;
          &lt;source ng-src="{{ some_path }}" type="audio/mpeg"&gt;
      &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>