javascript - Pass data from input field to $http.get in an angular factory -

i want able pass user input values submit button fired in controller factory loads values, stored variables, $http.get() request. how pass value controller service? going right way?

controller

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

factory

angular.module('myapp') .factory('phoneservice', function($http) { var promise = $http.get('http://dev.website.com:8080/api/get?areacode=' + phone1 + '&exchange=' + phone2 + '&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; }); 

html

<div id="phone-wrapper">     <h4>enter phone number:</h4>     <label for="phone_number">       <input type="text" id="phone_number" ng-model="data.phone" ui-mask="(***)***-****" placeholder="(___)___-____"/>     </label>     <div class="row"></div>     <button class="btn btn-lg btn-primary scrolltop" type="submit" id="submitphone" value="submit" ng-disabled="phoneform.$invalid">start</button>     <br/>   </div> 

your controller doesn't need jquery, best not use @ , learn angular way.

html:

<input type="text" id="phone_number" ng-model="myinput.phone" ui-mask="(***)***-****" placeholder="(___)___-____"/>  // inject $scope controller, otherwise ng-model useless in html .controller('phonesubmitcontroller', function($scope, $http, phoneservice) {      $scope.myinput = {         phone: ""     };     $scope.submitphone = function() { // no need pass here          // phone service should take input param, right? , send number out?         phoneservice.senddata($scope.myinput.phone).then(function(successresponse) {             console.log(successresponse);         }, function(failureresponse){             console.log(failureresponse);         });     }; }); 

your factory should use take input , follow general pattern, here version of factory:

angular.module('myapp').factory('phoneservice', function($http, $q) { // inject $ use of promises     var jawn = null;     // factory singleton reusable, can called time send data, given input     return {         senddata: function(phonenumber){             var deferred = $q.defer(); // create deferred object (think promise, either fail or succeed @ point)              var phone1 = phonenumber.substring(1,4);             var phone2 = phonenumber.substring(5,8);             var phone3 = phonenumber.substring(9,13);              $http.get('http://dev.website.com:8080/api/get?areacode=' + phone1 + '&exchange=' + phone2 + '&lastdigits' + phone3, {                 headers: {                     'authorization': "basic " + base64.encode("allen" + ":" + "iverson1"),                     'content-type': 'application/json'                 },                 contenttype: 'application/json',                 data: angular.tojson(jawn),                 cache: false             })             // handle success/error here, logging, , if needed in controller             .then(function(successresponse){ // handle success in factory                 console.log('success', successresponse);                 deferred.resolve(successresponse); // mark successful                 jawn = data;               }, function(errorresponse){ // handle failure in factory                 console.log('failure', errorresponse);                 deferred.reject(errorresponse); // mark failed             });              return deferred.promise; // return promise          }, someotherfunction: function(somedata){                // use other http call phoneservice.someotherfunction(some input data);                return $http.get('someotherurl', somedata);         }     };  });