How to open modal window on button click in AngularJS - angularjs

Question

I can not figure out how to get a ui.bootstrap modal window to work with AngularJS. I'm getting the error messagse: Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal <- AdvancedSearchCtrl
Here's the code:
(function () {
angular.module('crm.ma')
.controller('AdvancedSearchCtrl', function ($modal) {
var vm = this;
vm.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'app/components/common/advancedSearchModal.html',
controller: advancedSearchInstanceCtrl
});
};
});
angular.module('crm.ma').controller('advancedSearchInstanceCtrl', function ($modalInstance) {
var modal = this;
modal.cancel = function () {
$modalInstance.close();
};
});
})();
<div class="row">
<button ng-click="vm.openModal()">Add User</button>
<script type="text/ng-template" id="advancedSearchModal.html">
<div class="modal-header">
<h3>Text for header</h3>
</div>
<div class="modal-body">
Text for body
</div>
<div class="modal-footer">
<button type="submit">Search</button>
<button class="btn btn-warning" ng-click="modal.cancel()">Cancel</button>
</div>
My module code:
(function () {
'use strict';
var app = angular
.module('crm.ma',
[
'ui.router',
'ui.bootstrap',
'angularUtils.directives.dirPagination',
'toastr',
'crm.ma.common',
]);
})();

Answer 1

Also, you've defined modalInstance in 'AdvancedSearchCtrl' but haven't called it.
modalInstance.result.then(function(x) { do something here} );