I am trying to make a pop up window in my Angular application. I am referring [this link](http://codepen.io/m-e-conroy/pen/ALsdF) to make the window. 

I added just the button to my abc.html :

```
 <button class="btn btn-warning" ng-click="launch('create')">Custom Dialog</button>

```

I also added the styles mentioned in the link to my CSS.
Then, I added the controller slight differently as :
App.js file :

```
var myApp = angular.module('myApp',[
  'ui.router',
  'ui.bootstrap',
  'validation', 
  'validation.rule', 
  'users',
  'dashboard',
  'reports',
  'employees',
  'reservations',
  'employeeTalentPool',
  'ui.bootstrap',
  'dialogs'
]);

```

abc.js :

```
myApp.controller('dialogServiceTest', function ($scope, $rootScope, $timeout, $dialogs) {
    $scope.confirmed = 'You have yet to be confirmed!';
    $scope.name = '"Your name here."';

    $scope.launch = function (which) {
        var dlg = null;
        switch (which) {

            // Error Dialog
            case 'error':
                dlg = $dialogs.error('This is my error message');
                break;

                // Wait / Progress Dialog
            case 'wait':
                dlg = $dialogs.wait(msgs[i++], progress);
                fakeProgress();
                break;

                // Notify Dialog
            case 'notify':
                dlg = $dialogs.notify('Something Happened!', 'Something happened that I need to tell you.');
                break;

                // Confirm Dialog
            case 'confirm':
                dlg = $dialogs.confirm('Please Confirm', 'Is this awesome or what?');
                dlg.result.then(function (btn) {
                    $scope.confirmed = 'You thought this quite awesome!';
                }, function (btn) {
                    $scope.confirmed = 'Shame on you for not thinking this is awesome!';
                });
                break;

                // Create Your Own Dialog
            case 'create':
                dlg = $dialogs.create('/dialogs/whatsyourname.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' });
                dlg.result.then(function (name) {
                    $scope.name = name;
                }, function () {
                    $scope.name = 'You decided not to enter in your name, that makes me sad.';
                });

                break;
        }; // end switch
    }; // end launch

    // for faking the progress bar in the wait dialog
    var progress = 25;
    var msgs = [
      'Hey! I\'m waiting here...',
      'About half way done...',
      'Almost there?',
      'Woo Hoo! I made it!'
    ];
    var i = 0;

    var fakeProgress = function () {
        $timeout(function () {
            if (progress < 100) {
                progress += 25;
                $rootScope.$broadcast('dialogs.wait.progress', { msg: msgs[i++], 'progress': progress });
                fakeProgress();
            } else {
                $rootScope.$broadcast('dialogs.wait.complete');
            }
        }, 1000);
    }; // end fakeProgress 

}) // end dialogsServiceTest
.controller('whatsYourNameCtrl', function ($scope, $modalInstance, data) {
    $scope.user = { name: '' };

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

    $scope.save = function () {
        $modalInstance.close($scope.user.name);
    }; // end save

    $scope.hitEnter = function (evt) {
        if (angular.equals(evt.keyCode, 13) && !(angular.equals($scope.name, null) || angular.equals($scope.name, '')))
            $scope.save();
    }; // end hitEnter
}) // end whatsYourNameCtrl
.run(['$templateCache', function ($templateCache) {
    $templateCache.put('/dialogs/whatsyourname.html', '<div class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4 class="modal-title"><span class="glyphicon glyphicon-star"></span> User\'s Name</h4></div><div class="modal-body"><ng-form name="nameDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[nameDialog.username.$dirty && nameDialog.username.$invalid]"><label class="control-label" for="username">Name:</label><input type="text" class="form-control" name="username" id="username" ng-model="user.name" ng-keyup="hitEnter($event)" required><span class="help-block">Enter your full name, first &amp; last.</span></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty && nameDialog.$invalid) || nameDialog.$pristine">Save</button></div></div></div></div>');
}]); // end run / module

```

While running the app, Im getting error :

```
    angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injector:unpr] Unknown provider: $animateProvider
http://errors.angularjs.org/1.2.25/$injector/unpr?p0=%24animateProvider
    at http://localhost:51703/bower_components/angular/angular.js:78:12
    at http://localhost:51703/bower_components/angular/angular.js:3802:19
    at getService (http://localhost:51703/bower_components/angular/angular.js:3930:39)
    at invoke (http://localhost:51703/bower_components/angular/angular.js:3957:13)
    at Object.instantiate (http://localhost:51703/bower_components/angular/angular.js:3977:23)
    at provider (http://localhost:51703/bower_components/angular/angular.js:3833:36)
    at Object.provider (http://localhost:51703/bower_components/angular/angular.js:3825:16)
    at http://localhost:51703/bower_components/angular/angular.js:3885:37
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18)
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=ngAnimate&p1=Error…F%2Flocalhost%3A51703%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A5)
    at http://localhost:51703/bower_components/angular/angular.js:78:12
    at http://localhost:51703/bower_components/angular/angular.js:3906:15
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18)
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5)
    at http://localhost:51703/bower_components/angular/angular.js:3879:40
    at forEach (http://localhost:51703/bower_components/angular/angular.js:325:18)
    at loadModules (http://localhost:51703/bower_components/angular/angular.js:3872:5)
    at createInjector (http://localhost:51703/bower_components/angular/angular.js:3812:11)
    at doBootstrap (http://localhost:51703/bower_components/angular/angular.js:1444:20)
    at bootstrap (http://localhost:51703/bower_components/angular/angular.js:1459:12)
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=Error%3A%…%2Flocalhost%3A51703%2Fbower_components%2Fangular%2Fangular.js%3A1459%3A12)(anonymous function) @ angular.js:78(anonymous function) @ angular.js:3906forEach @ angular.js:325loadModules @ angular.js:3872createInjector @ angular.js:3812doBootstrap @ angular.js:1444bootstrap @ angular.js:1459angularInit @ angular.js:1368(anonymous function) @ angular.js:22019j @ jquery-1.11.0.js:2fireWith @ jquery-1.11.0.js:2ready @ jquery-1.11.0.js:2K @ jquery-1.11.0.js:2

```

I am a beginner and not sure how it works. Can anyone help me out with a solution to fix this?