title: How to pass form data from angular ui bootstrap modal to view
body: <p>I'm creating a webapp and I want to implement an option to add friends. I've created the add friend page as a modal with a text input field. I want to test this by displaying the input on my view page. How do I display this data onto my view page?</p>
  
  <p>Here's what I currently have</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;div ng-controller="ModalDemoCtrl"&gt;
      &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;div class="modal-header"&gt;
              &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
          &lt;/div&gt;
  
           &lt;form name = "addFriendForm"&gt;
            &lt;input ng-model = "user.name"class="form-control" type = "text" placeholder="Username" title=" Username" /&gt;
            {{ user.name }}
          &lt;/form&gt;
  
          &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;
              &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
          &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;button class="btn btn-default" ng-click="open()"&gt;Add Friend&lt;/button&gt;
      &lt;div&gt; Username: {{user.name}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my JavaScript file:</p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
  
    $scope.user = {name: ""}
  
    $scope.open = function () {
  
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',
        resolve: {
          items: function () {
            return $scope.items;
          }
        }
      });
  
      modalInstance.result.then(function () {
        $scope.user.name = user.name;}, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  });
  
  angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
  
    $scope.ok = function () {
      $modalInstance.close($scope.user.name);
    };
  
    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
  });
  </code></pre>
  
  <p>plunkr: <a href="http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview">http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview</a></p>