title: Pass data from input field to $http.get in an angular factory
body: <p>I want to be able to pass user input values from a submit button that is fired in a controller to a factory which loads the values, stored as variables, to an $http.get() request. How would I pass this value from the controller to the service? Am I going about this the right way?</p>
  
  <h2>controller</h2>
  
  <pre><code>'use strict';
  angular.module('myApp')
  .controller('phoneSubmitController', function($http, phoneService) {
   $scope.submitPhone = function(data) {
    phoneService.then(function(data) {
      var phone  = $('#phone_number').val();
      var phone1 = phone.substring(1,4);
      var phone2 = phone.substring(5,8);
      var phone3 = phone.substring(9,13);
      $scope.JAWN = data;
    });
    };
  });
  </code></pre>
  
  <h2>factory</h2>
  
  <pre><code>angular.module('myApp')
  .factory('phoneService', function($http) {
  var promise = $http.get('http://dev.website.com:8080/api/get?areacode=' + phone1 + '&amp;exchange=' + phone2 + '&amp;lastdigits' + phone3, {
    headers: {
      'Authorization': "Basic " + Base64.encode("Allen" + ":" + "Iverson1"),
      'Content-Type': 'application/json'
    },
    contentType: 'application/json',
    data: angular.toJson(JAWN),
    cache: false
  })
  .success(function(data) {
    console.log('success = ' + this);
    JAWN = data;
  })
  .error(function($log) {
    console.log($log);
  });
  return promise;
  });
  </code></pre>
  
  <h2>html</h2>
  
  <pre><code>&lt;div id="phone-wrapper"&gt;
      &lt;h4&gt;Enter a phone number:&lt;/h4&gt;
      &lt;label for="phone_number"&gt;
        &lt;input type="text" id="phone_number" ng-model="data.phone" ui-mask="(***)***-****" placeholder="(___)___-____"/&gt;
      &lt;/label&gt;
      &lt;div class="row"&gt;&lt;/div&gt;
      &lt;button class="btn btn-lg btn-primary scrollTop" type="submit" id="submitPhone" value="Submit" ng-disabled="phoneForm.$invalid"&gt;Start&lt;/button&gt;
      &lt;br/&gt;
    &lt;/div&gt;
  </code></pre>