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?

Here's what I currently have

index.html

<div ng-controller=ModalDemoCtrl>

    <script type=text/ng-template id=myModalContent.html>

        <div class=modal-header>

            <h3 class=modal-title>I'm a modal!</h3>

        </div>



         <form name = addFriendForm>

          <input ng-model = user.nameclass=form-control type = text placeholder=Username title= Username />

          {{ user.name }}

        </form>



        <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>



    <button class=btn btn-default ng-click=open()>Add Friend</button>

    <div> Username: {{user.name}}</div>

</div>

my JavaScript file:

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');

  };

});

plunkr: http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview