How to return promise form controller to directive in angularjs using $resource

Question

I want promise to be returned from controller to directive, as I want to change template based on promise received.

LoginController :

(function() {
  angular.module('nd')
    .controller('LoginController', loginController);

  function loginController(
    $scope,
    modelFactory,
    User,
    APPLICATION,
    REST_URL,
    $resource
    ) {

    $scope.user = modelFactory.create('user', User);

    $scope.login = login;

    function login() {
      var resource = $resource(APPLICATION.host + REST_URL.login);
      var promise = resource.save($scope.user);
      return promise;
    }
  }
})();

Button Directive :

(function() {
  angular.module('nd')
    .directive('ndButton', button);

  function button() {
    return {
      restrict: 'E',
      scope: {
        ndLable: '@',
        ndClick: '&'
      },
      templateUrl: '../components/fields/button/button.template.html',
      link: link
    };

    function link(scope) {
      scope.clickButton = function() {
        var promise = scope.ndClick();
        promise.$promise.then(function(user) {
          console.log(user);
        });
      };
    }
  }
})();

login.html :

<form ng-submit="login()">
  <div class="input-container">
    <nd-text-box
      ng-model="user.username"
      nd-lable="Username"
      nd-id="Username"
      nd-required="required"></nd-text-box>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <nd-password
      ng-model="user.password"
      nd-lable="Password"
      nd-id="Password"
      nd-required="required"></nd-password>
    <div class="bar"></div>
  </div>
  <div class="button-container">
    <nd-button nd-lable="Go"></nd-button>
  </div>
  <div class="footer"><a href="#">Forgot your password?</a></div>
</form>

button template :

<button ng-click="clickButton()">
  <span>{{ndLable}}</span>
</button>

In directive, at scope.ndClick(), it is calling function login() of controller. In controller, I'm getting promise as { $promise: Promise, $resolved: false }. I'm returning promise back in directive, but in directive I'm getting promise as undefined.

Answer 1

login.html

<div class="button-container">
    <nd-button nd-lable="Go" ndClick="login()"></nd-button>
</div>

Bind the $scope.login method to ndClick