Opening a modal from within another controller in AngularJS

Question

I have a form in my AngularJS application. When I click on "submit", I want to check that the information is successfully sent to the server, and then open a modal dialog- ONLY if the request has been successful. I think this means that I need to call the modal from within the controller used by the form, but I'm not sure how to achieve this. Can anyone advise? I made an attempt at including the modal controller functionality within the form controller but it didn't work out.

Here is my html:

    <div ng-controller = "FormCtrl" >

             <div class="login no padding">

                    <div class="container">

                        <div class="form">

                                <form id = "myForm" name="myForm" role = "form">

                                            <div class="clearfix input-size pull-left category">User Details</div>

                                                    <input class="form-control" type="text" placeholder="Name" name = "name" ng-model="name">

                                                    <input class="form-control" type="text" placeholder="Email" name = "email" ng-model="email">

                                                    <button ng-click="createNewUser()" class="button">SUBMIT</button>



                                            </div>
                                        </div>
                                    </form>
                                </div>

//This is my modal code. It has a button to open the modal, just for testing. I need to open the modal from within my FormCtrl.

                                <div ng-controller='ModalCtrl'>
<button ng-click='toggleModal()'>Open Modal Dialog</button>
<modal-dialog show='modalShown' width='300px' height='40%'>
  <p>Modal Content Here!<p>
  <a href= "#/home" class="link">Get Started...</a>

</modal-dialog>

                </div> 

ModalCtrl

angular.module('myApp.controllers')
    .controller('ModalCtrl', ['$scope', function($scope) {
  $scope.modalShown = false;
  $scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
  };
}]);

FormCtrl

angular.module('myApp.controllers')
    .controller('FormCtrl', ['$scope', 'UsersFactory', '$location', '$route',
        function ($scope, UsersFactory,  $location, $route) {

        // callback for ng-click 'createNewUser':
            $scope.createNewUser = function () {
          // UsersFactory.create($scope.user);

                UsersFactory.create($scope.user).$promise.then(function (users) {
                    $scope.submitted = true;

                    // this is where i need to call the modal open function


                }, function (err) {
                    console.error(err);

                });

            }


        }]);

Here's a JSBin- http://jsbin.com/aDuJIku/257/edit?html,js,output

EDIT: Here's my modal directive, if it helps.

angular.module('myApp')
    .directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with the template below
    transclude: true, // we want to insert custom content inside the directive
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.width)
        scope.dialogStyle.width = attrs.width;
      if (attrs.height)
        scope.dialogStyle.height = attrs.height;
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><div class='ng-modal-dialog-content' ng-transclude></div></div></div>"
  };
});

Answer 1

I got this to work in a pretty obvious way in the end- I managed to include the ModalCtrl functionality within my FormCtrl and simply changed the createNewUser() function to:

$scope.createNewUser = function () {

            UsersFactory.create($scope.user).$promise.then(function (users) {
                $scope.submitted = true;
                $scope.modalShown = !$scope.modalShown;

            }, function (err) {
                console.error(err);

            });

        }

thereby eliminating the toggleModal method completely. So now when I click submit, it sends the data to the server, waits for it to be successful, then opens the modal.

Note: This probably is not the most 'angular' way of achieving this, nor is it particularly reusable but my application seems to have a strange structure that doesn't seem to suit normal methods of including modal dialogs.

Answer 2

you can call

$('#YourModalId').modal('show'); 

and

$('#YourModalId').modal('hide');

greetings