Untitled

<!DOCTYPE html>
<html ng-app="foo">

  <head>
    <link data-require="bootstrap-css@3.1.1" 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.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="AwesomeParentController">
    <div class="btn btn-primary" ng-click="open()">Open the Modal</div>
  </body>

</html>

// Code goes here

angular.module('foo',['ui.bootstrap'])

.controller('AwesomeParentController', ['$scope', '$modal', function(scope, modal){
  scope.open = function(){
     options = {
      templateUrl: 'modal.html',
      controller: 'AwesomeModalController'
     }
     modalInstance = modal.open(options)
     
     modalInstance.result.then(function(){
       console.debug("result!")
     })
  }  
}])
  
.controller("AwesomeModalController", ['$scope', '$modalInstance', function(scope, modalInstance){
    scope.models = {}
    scope.submit = function(){
      console.debug(scope)
    }  
}])

.controller('JankyFormController', ['$scope', function(scope){
  scope.models['fooForm'] = scope.fooForm
}])

/* Styles go here */

<form name="fooForm">
  <div ng-controller ="JankyFormController">
    <textarea ng-model="reason" required=""></textarea>
    <div class='btn btn-primary' ng-click="submit()">Awesome Submit Button</div>  
  </div>
</form>