title: Paramaters of $scope.function becomes undefined
body: <p>I have this html</p>
  
  <pre><code>&lt;div ng-controller = "RetrieveCtrl as retrieve" &gt;
      &lt;form&gt;
          &lt;input ng-model = "retrieve.input1"&gt;
          &lt;input ng-model = "retrieve.input2"&gt;
  
          &lt;button type="submit" ng-click="retrieve.retrieveEntry()"&gt;Search&lt;/button&gt;
  .
  .
  .
  </code></pre>
  
  <p>with this controller</p>
  
  <pre><code>app.controller('RetrieveCtrl', ['$scope' , '$http', function($scope, $http) {
  
      $scope.retrieveEntry = function () {
  
          var input1 = $scope.retrieve.input1;
          var input2 = $scope.retrieve.input2;
  
          // validate input1 &amp; input2 first...
          // input1 &amp; input2 part of URL
  
          $http.get(...
  
  
          )
  
      };
  
  }
  </code></pre>
  
  <p>which is working fine, I was able to retrieve my data from the web service. What I want to do is to refactor the function into two:</p>
  
  <pre><code>app.controller('RetrieveCtrl', ['$scope' , '$http', function($scope, $http) {
  
      $scope.clickSearch = function() {
  
          var input1 = $scope.retrieve.input1;
          var input2 = $scope.retrieve.input2;
  
          // validate input1 &amp; input2 first...
          $scope.retrieveEntry(input1, input2);
  
      };
  
      $scope.retrieveEntry = function (a, b) {
  
  
          // build a and b in URL
          $http.get(...
  
  
          )
  
      };
  
  }
  </code></pre>
  
  <p>so that I could reuse <code>$scope.retrieveEntry</code> on other functionalities. However, a and b becomes undefined, after I split the function into two (button's <code>ng-click</code> is updated to <code>"retrieve.clickSearch()"</code>). I suspect it has to do with <code>$scope</code>, which I don't have much clear understanding of what's going on (I'm still quite confused with this and <code>$scope</code>) Could someone explain what's happening behind and how to resolve this?</p>
  
  <p>Thanks.</p>