Displaying a bootstrap Modal dialog from Angular Controller

Question

I'm trying to figure out how I can present a bootstrap modal dialog from my Angular controller. Basically what I have is a table. When the user clicks on a table row I want to present a modal dialog that contains details about the selected row.

The way I'm thinking about approaching this is have each table row respond to an ng-click. The ng-click will call a function in the controller and this function will present the modal dialog as well as pass it the data it needs to display.

I know how to display a modal dialog from the view itself, but I'm not sure how I can trigger the modal from the controller. Any ideas?

The controller, for the view, has the following function which will be called when the user selects a row to view a modal dialog.

$scope.rowClicked = function(rowID){
    $scope.dataForModal = Data.get(rowID, function(err,data){
        //Here is where I'd like to display the modal dialog in the view
    });
}

Answer 1

See http://angular-ui.github.io/bootstrap/#/modal

Use a ng-click="showDetails(item)" on the cell/row in your view. Then use this code in your controller to show the Modal:

$scope.showDetails = function (item) {
    var modalInstance = $modal.open({
        templateUrl: 'yourview.html',
        controller: 'DetailModalController',                       
        resolve: {
            item: function () {
                return  item;
            },                            
        }
    });

    modalInstance.result.then(function (item) {
        // ok
    }, function () {
        // dismiss
    });
};

Your modal controller can be something like this:

angular.module('app').controller('DetailModalController', [
    '$scope', '$modalInstance', 'item',
    function ($scope, $modalInstance, item) {

        $scope.item = item;

        $scope.dismiss = function () {
            $modalInstance.dismiss();
        };

        $scope.close = function () {                    
             $modalInstance.close($scope.item);                       
        };
    };
}]);

With $modalInstance.close($scope.item); you can pass an object. With $modalInstance.dismiss(); you dismiss the modal without an object.