AngularJS - How to Create a Modal Dialog from the Controller

I am able to create a Modal Dialog from within the html file, but I need to click a button, do some logic in the controller (i.e. service call and validate data), and based off of the response, I need to popup a modal dialog from within the controller in order to inform the user that there is an error.

I have figured out how to do it from within the html file, but it will not popup from within the controller. Here are snippets of what I have:

login.html - Contains a form with a submit button (I am not pasting the entire file):

  <form name="loginPage" class="form-signin" role="form" style="position: absolute; margin: 250px 0px 0px 500px;" ng-submit="submitForm(userForm.$valid)">
<h2 class="form-signin-heading">Login</h2>
<input type="text" class="form-control" ng-model="name" placeholder="Username" required autofocus>
<input type="password" class="form-control" ng-model="password" ng-click="password" placeholder="Password" required>
<label class="checkbox">
    <input type="checkbox" value="remember-me"> Remember me
</label>
<input type="submit" class="btn btn-lg btn-primary btn-block" value="Log In"/>

controllers.js - Contains this code (I am not pasting the entire file):

 $scope.submitForm = function () {
      //Making an Ajax service call (SOAP service call being made) in this function, and then results will then call a function named ajaxFinish

 $.ajax({
        url: productServiceUrl,
        type: "POST",
        dataType: "xml",
        data: soapMessage,
        processData: false,
        success: function (xml) {
            ajaxFinish($scope, xml);
        },
        contentType: "text/xml; charset=utf-8"
    });

}

  function ajaxFinish($scope, xml) {
      var modalInstance = $modal.open({
        templateUrl: 'view/myModalContent.html',
        controller: ModalInstanceCtrl,
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });
 }

myModalContent.html -

 <label>Alert Message!</label>

When I debug, it hits the ajaxFinish method, but nothing opens up. I am using stateProvider. I have a file called modules.js that contains a bunch of pages, one of which is the modal dialog:

modules.js (A snippet of some of the code) -

         .state('main.myModalContent', {
            url: '',
            controller: ModalDemoCtrl,
            templateUrl: 'view/myModalContent.html'
        })

When I try the Plunker in the comments below, my modal dialog pops up on the left of the screen... completely cut off. See screenshot: