title: Resizing input size on focus and blur in angularjs
body: <p>I'm trying to change the input size from 20 to 100 each time it ng-focus. Then, when it ng-blur, it should convert from 100 to 20. Here is my html code:</p>
  
  <pre><code>&lt;div ng-controller="MenuCtrl" class="navbar-collapse collapse bs-navbar-collapse navbar-ex1-collapse"&gt;
    &lt;input type="text" class="form-control" ng-blur="{[{ change_text_width() }]}" ng-focus="{[{ change_text_width() }]}" size="{[{search_text_width}]}" placeholder="Search"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Before my angular module, I put a parent module: </p>
  
  <pre><code>var JobMaps = angular.module('JobMaps', ['MenuCtrl']); 
  </code></pre>
  
  <p>Here is my angular code:</p>
  
  <pre><code>var MenuCtrl = angular.module('MenuCtrl',[]);
  MenuCtrl.controller = angular.module('MenuCtrl',function($scope) {
    $scope.search_text_width = 20;
    $scope.change_text_width = function() {
      if ($scope.search_text_width==20) {
        $scope.search_text_width = 100;
        //alert($scope.search_text_width);
      } else {
        $scope.search_text_width = 20;
        //alert($scope.search_text_width);
      }
    }
  });
  </code></pre>
  
  <p><strong>Observation:</strong></p>
  
  <ol>
  <li>I tried to alert it, and it seems like it runs several times. </li>
  <li>I think it may be converting from 20 to 100 and 100 to 20 back so fast, I could not see it... Well, it could be a possibility because of several alerts that popup.</li>
  </ol>