Angular binding directive scope to controller scope - angularjs

Question

I am creating a forgot password function for an application I am building and so I built a function that sends an $http request to a PHP resource that sends the user a reset email. When the request resolves than I display a twitter bootstrp modal using an angular directive that tells the user if their email was successfully sent or not.
The issue I am having is that the scope of the controller and the directive seem different as updating the feedback in my controller does not update the output of the directive.
My controller:
angular
.module('enigma.auth')
.controller('Auth', Auth);
Auth.$inject = ['authFactory'];
function Auth(authFactory) {
var auth = this;
auth.forgotPassword = forgotPassword;
auth.forgotPasswordFeedback = '';
function forgotPassword(email) {
if(email) {
authFactory.forgotPassword({ email: email })
.then(function(res) {
auth.forgotPasswordFeedback = res.message; // auth.forgotPasswordFeedback is set to the correct value now, however this isn't reflected in the directive.
$('#forgotPassword').modal();
});
}
};
}
My directive:
angular
.module('enigma.forgotPasswordDirective', [])
.directive('forgotPasswordDirective', forgotPasswordDirective);
function forgotPasswordDirective() {
return {
bindToController: true, // I thought this told the directive to use the controllers scope instead of an isolated scope...
controller: 'Auth',
controllerAs: 'auth',
templateUrl: 'modules/auth/forgotPassword.html'
}
}
The template:
<div class='modal fade' id='forgotPassword'>
<div class='modal-dialog'>
<div class='modal-content'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
<div class='row'>
<div class='col-xs-12'>
<h3>Password Recovery</h3>
<p>
{{auth.forgotPasswordFeedback}} <!-- this value is never updated :( -->
</p>
<p>
<button class='btn btn-primary' data-dismiss='modal'>Close</button>
</p>
</div>
</div>
</div>
</div>
</div>
Lastly I have this all included inside my registration template which is bound to the registration controller (Note: Don't the forgot password directive is bound to the auth controller), here's the relevant bits.
<div class='form-group'>
<label for='email'>Email:</label>
<input class='form-control' name='email' ng-model='reg.user.email' required type='email' ng-blur='reg.alreadyRegistered()' />
<div ng-messages='reg.regForm.email.$error' ng-if='reg.regForm.email.$dirty'>
<div class='error' ng-message='userExists'>This user already exists. <a href='#' ng-click='auth.forgotPassword(reg.user.email)' title='Forgot password' ng-controller='Auth as auth'>Forgot password?</a></div>
</div>
</div>
...
<forgot-password-directive></forgot-password-directive>

Answer 1

It works, for example, if you wrap the directive inside the controller:
<div ng-controller='Auth as auth'>
<div class='form-group'>
...
<a href='#' ng-click='auth.forgotPassword(reg.user.email)' title='Forgot password'>Forgot password?</a>
</div>
<forgot-password-directive></forgot-password-directive>
</div>
However, in addition, I would use a simpler approach and define the directive followingly:
function forgotPasswordDirective() {
return {
scope: false,
templateUrl: 'modules/auth/forgotPassword.html'
}
}
If you are familiar with Node, you may clone and run the example from here: https://github.com/masa67/NgBind.