<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script data-require="angular-touch@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-touch.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
<input type="text" placeholder="Clicking here doesn't work =(" />
</div>
</script>
<input type="text" placeholder="Clicking here works" />
<br />
<button class="btn btn-default" ng-click="open()">Open me!</button>
</div>
<script>
angular.module('app', ['ngTouch','ui.bootstrap'])
.controller('ModalDemoCtrl', function($scope, $modal, $log) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl'
});
};
})
.controller('ModalInstanceCtrl', function($scope, $modalInstance) {})
</script>
</body>
</html>