AngularJS Modal Popup

Question

I\'m really new to Angular. I\'m trying to recreate the modal sample at this link https://angular-ui.github.io/bootstrap/ I am having no luck with it! I created a plunker htt

Answer 1

Here's a corrected fork of your plunk: http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview. You just had some minor syntax errors.

JAVASCRIPT

var app = angular.module('crm.ma', ['ngAnimate', 'ui.bootstrap']);

app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

$scope.items = ['item1', 'item2', 'item3'];

$scope.animationsEnabled = true;

$scope.open = function (size) {

    var modalInstance = $uibModal.open({
        animation: $scope.animationsEnabled,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });

    modalInstance.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $modalInstance represents a modal window (instance)   dependency.
// It is not the same as the $uibModal service used above.

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

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

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

HTML

  

    
  Open me!
  Large modal
  Small modal
  Toggle Animation ({{ animationsEnabled }})
  
Selection from a modal: {{ selected }}