Angular UI: field entered in Modal is undefined in controller - angularjs

Question

Please run this plunker, if you enter a value in the modal and then click on show value, the value is undefined in $scope, how to get the value?
HTML
<div ng-app="app" ng-controller="myCtl">
<input type="button" ng-click="openModal()" value="Open Modal">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h4 class="modal-title">The Title</h4>
</div>
<form name="myForm" novalidate>
Enter a value <input type="text" ng-model="someField" />
</form>
<div class="modal-footer">
<button ng-click="showValue()">Show value</button>
</div>
</script>
</div>
Javascript
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myCtl', function($scope,$uibModal) {
$scope.openModal = function() {
$scope.modalInstance = $uibModal.open({
animation: false,
templateUrl: 'myModalContent.html',
scope: $scope
});
};
$scope.showValue = function() {
alert('value entered=' + $scope.someField);
};
});

Answer 1

You are seeing this because the scope of the modal is isolated. Even though you pass the $scope to modal. It still does not use the same $scope.
For your example the following would work.
Update the modal template:
<button ng-click="showValue(someField)">Show value</button>
Update your controller showValue method as follows:
$scope.showValue = function(theValue) {
$scope.someField = theValue;
alert('value entered=' + $scope.someField);
};
Really though the best way to use the modal is to use the modal instance created by the open method to track the close and dismiss events and handle the result that way. Take a look at the example on on the ui-modal section of the ui-bootstrap documentation