AngularStrap close modal with controller

Question

I'm using AngularStrap with bootstrap.

I have a modal dialog that uses it's own controller. How can I close the modal using this local controller?

I instantiate the controller on a button like this:

<button type="button" 
  class="btn btn-success btn-lg" 
  bs-modal="modal" 
  data-template="user-login-modal.html"
  data-container="body"
  ng-controller="userLoginController"
  >Click here to log in</button>

and the userLoginController has this:

$scope.authenticate = function(){
    this.hide(); // this doesn't work
    }

This is obviously just a demo, I want it to close on successful login, but this is where the code I'd use to close it would go.

I've tried instantiating the modal programmatically (use the $modal service to create the modal) but I haven't been able to figure out how to inject the controller through that method.

If I were to do something like emit an event from the modal using the bs-modal directive, how can I reference the modal to close it?

here's my plnkr: http://plnkr.co/edit/m5gT1HiOl1X9poicWIEi?p=preview

Answer 1

When in the on-click function do

$scope.myClickEvent = function () {
   this.$hide();
}