Really simple directive for http://vitalets.github.io/x-editable/, created this because i wanted to use the popover, and not the inline version provided by the existing angularJS directive. It's really simple to use, just add 'editable' to your modules, then use like: <h2 ng-model="form.name" editable></h2> you can also pass through options i.e.…

x-editable angularjs directive

(function() {
  "use strict";

    angular.module("editableModule", ['ng']).directive("editable", function($timeout) {
            return {
                restrict: "AE",
                scope: true,
                require:"ngModel",
                link: function(scope, element, attrs, ngModel) {
                    element.editable({
                        success: function(response, newValue) {
                            $timeout(function() {
                                ngModel.$setViewValue(newValue);
                                ngModel.$render();
                            });
                        }
                    });
                    scope.$watch(attrs.ngModel, function(newValue) {
                        element.editable('setValue', newValue);
                    });
                }
            };
    });
}).call(this);

I would change your watch to

scope.$watch(attrs.ngModel, function(newValue) {
  $(element).editable('setValue', newValue);
});

I'm not sure what you're using scope.editable for. You're also creating an isolated scope but not using it other than scope.editable. You can set the scope to true if you don't plan on using it but want the scope isolated

Spot on, i've updated the gist accordingly

also if you include jquery and it's plugins before angular you element should have . editable() so you don't have to wrap it again