title: Angular JS observe on directive attribute
body: <p>How can angular js watch attributes on custom directive in order to accept angular values to be bind </p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>&lt;tile title="Sleep Duration" data-value="{{sleepHistory.averageSleepTime}}"/&gt;
  
  app.directive('tile', [function() {
      return {
          restrict: 'E',
          link: function(scope, element, attrs) {
              var title = attrs.title;
  
              attrs.$observe('dataValue', function(val) {
                  var data = val;
  
                  console.log(data);
  
                  var dom =
                      "&lt;div&gt;" +
                      "&lt;p&gt;" + title + "&lt;/p&gt;" +
                      "&lt;p&gt;" + data + "&lt;/p&gt;" +
                      "&lt;/div";
  
                  $(element).append($(dom.trim()));
              });
          }
      };
  }]);
  </code></pre>
  
  <p>but the observed value is coming back as undefined</p>