component directive

my-component.html

<div>
  <pre>{{vm.ngModel|json}}</pre>
  <button ng-click="vm.save()" ng-disabled="vm.saving">Save</button>
</div>

my-component.js

angular.module('my-app')
  .directive('my-component', function() {
    return {
      templateUrl: 'my-component.html',
      // put logic in a controller, available to the view as `vm`
      controller: 'MyComponentCtrl as vm',
      // inputs to the component
      scope: { ngModel:'=' },
      // bind inputs directly to the controller
      bindToController: true
    };
  })
  .controller('MyComponentCtrl', function(MyService) {
    // initialize the controller, create functions for the template
    var vm = this;
    vm.save = function() {
      vm.saving = true; // let the view know we're working
      MyService.save(vm.ngModel)
        .then(function() {
          vm.saving = false;
        });
    };
  });