title: AngularJS fire action on html tag change
body: <p>I'm writing an on-page JS app with angular which will be integrated into different pages on our main website.</p>
  
  <p>The app is integrated on our page with the following code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="app-video-list" ng-app="videoList"&gt;
    &lt;video-list id="video-list" data-level="5"&gt;&lt;/video-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><code>data-level</code> is used to filter the list. So far everything works fine.  </p>
  
  <p>Now I want to be able to change the <code>level</code> on the website (not inside the angular app!) without reloading the page.</p>
  
  <pre class="lang-js prettyprint-override"><code>$("#video-list").attr("data-level", "3");
  </code></pre>
  
  <p>This changes the DOM-Element as expected, but it's not recognized by angular. I tried <code>attrs.$observe</code> in the directive, but that didn't helped:</p>
  
  <pre class="lang-coffee prettyprint-override"><code># CoffeeScript
  angular.module('videoList').directive 'videoList', ($document, templateBase) -&gt;
    restrict: 'E'
    replace: true
    templateUrl: templateBase + 'video_list.html'
    link: (scope, element, attrs) -&gt;
      attrs.$observe 'level', (value) -&gt;
        console.log 'level changed to ' + value
  </code></pre>
  
  <p>As we don't know by now who may implement our app as-well, I'm looking for a nice line of javascript like the one above!  </p>
  
  <p>Is there any way, that angular recognize a change of <code>data-level</code>, without calling a function like <code>$apply()</code> or <code>$digest()</code> with jQuery?</p>