title: Angular UI Bootstrap Modal and textboxes
body: <p>i tried to put  a textbox on the angular ui bootstrap modal component. </p>
  
  <p>For demonstration I changed the example which works with a list of items to a textbox.</p>
  
  <p><a href="http://plnkr.co/edit/itpxmvXL0JDZ5B1q9IEI" rel="nofollow">http://plnkr.co/edit/itpxmvXL0JDZ5B1q9IEI</a></p>
  
  <p>Can someone tell me what i'm doing wrong ?</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;div class="modal-body"&gt;
                &lt;input type="text" ng-model="username" placeholder="Username"&gt;
          &lt;/div&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;Open me!&lt;/button&gt;
      &lt;button class="btn btn-default" ng-click="open('lg')"&gt;Large modal&lt;/button&gt;
      &lt;button class="btn btn-default" ng-click="open('sm')"&gt;Small modal&lt;/button&gt;
      &lt;div &gt;Username: {{ username }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here the javascript:</p>
  
  <pre><code>var ModalDemoCtrl = function ($scope, $modal, $log) {
  
    $scope.username ='';
  
    $scope.open = function (size) {
  
      var modalInstance = $modal.open({
        templateUrl: 'myModalContent.html',
        controller: ModalInstanceCtrl,
        size: size,
        resolve: {
          username: function () {
            return $scope.username;
          }
  
        }
      });
  
      modalInstance.result.then(function (username) {
        $scope.username = username;
      }, function () {
        $log.info('Modal dismissed at: ' + new Date());
      });
    };
  };
  
  // Please note that $modalInstance represents a modal window (instance) dependency.
  // It is not the same as the $modal service used above.
  
  var ModalInstanceCtrl = function ($scope, $modalInstance) {
  
    $scope.username = 'A';
  
    $scope.ok = function () {
      $modalInstance.close($scope.username);
    };
  
    $scope.cancel = function () {
      $modalInstance.dismiss('cancel','');
    };
  };
  </code></pre>