title: X-editable and angularjs directive, not binding for server data
body: <p>I am trying to build a user entry form with x-editable and angularjs. While prototyping, everything seems to be okay when binding to the static data. The controls are stopped binding when the data is fetched from server(as shown in the screenshot attached) I have extracted a fiddler the issue can be reproduced here</p>
  
  <p><a href="http://jsfiddle.net/2p93vy8x/" rel="nofollow noreferrer">http://jsfiddle.net/2p93vy8x/</a></p>
  
  <p>The directive as follows</p>
  
  <pre><code> myApp.directive('xeditable', function($timeout) {
  return {
      restrict: 'A',
      require: "ngModel",
      link: function(scope, element, attrs, ngModel) {
              attrs.$observe('pk', function(value){
                  var pk = value;
                  attrs.$observe('xeditableSource', function(source){
                      if(!source) {source=null; value=null;}
                      else {value=scope.languageIdx;}
                      var loadXeditable = function() {
                          element.editable({
                              display: function(value, srcData) {
                                  ngModel.$setViewValue(value);
                                  scope.$apply();
  
                              },
                              mode:'popup',
                              pk: pk,
                              url: scope.url,
                              source:source,
                              value:value
                          });   
                      }; 
                      $timeout(function() {
                          loadXeditable();
                      }, 10);   
                  });       
              });
          }    };
  </code></pre>
  
  <p>});</p>
  
  <p>Any help on this is greatly appreciated,</p>
  
  <p><img src="https://i.stack.imgur.com/v0A7L.png" alt="enter image description here"></p>