When I press my button check in bootstrap modal, I want to print the value of my textbox in my console. But my textbox returns a undefined. It seems that all of the code are working perfect.
<!doctype html> <html ng-app="app" ng-controller="ModalDemoCtrl"> <head> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> <script src="example1.js"></script> </head> <body> <div ><button class="btn btn-default" ng-click="open('lg')" >Large modal</button> <script type="text/ng-template" id="myModalContent"> <div class="modal-header"> <h3 class="modal-title">I'm a modal!</h3> </div> <input type="text" ng-model="new1" /><button ng-click="check()" >check</button> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> </div> </script> </div> </body> </html> This is my javascript
var app = angular.module('app', ['ui.bootstrap']); //var ModalDemoCtrl = function ($scope, $modal, $log) { app.controller('ModalDemoCtrl',['$scope', '$modal','$log','$rootScope', function controller($scope, $modal, $log, $rootScope) { $scope.open = function (size) { $scope.val = ""; var modalInstance = $modal.open({ templateUrl: 'myModalContent', controller: ModalInstanceCtrl, size: size, backdrop: 'static', resolve: { items: function () { return $scope.items; } } }); modalInstance.result.then(function (selectedItem) { $scope.selected = selectedItem; }, function () { $log.info('Modal dismissed at: ' + new Date()); }); }; }]); var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) { $scope.check = function() { console.log($scope.new1); }; $scope.ok = function () { $modalInstance.close(); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }; 
