javascript - Angular: How to access angular $scope.ng-model_name from outside $http.get method? -

i using angularjs code $http.get method, when tried access $scope.metric.label. giving error "error: $scope.metric undefined not defined. want create dynamic url selection options. not able create dynamic url.

demo http://plnkr.co/edit/urufgauqjt8golz7qvsl?p=preview
in demo uncomment alert(url) see not working

//fetching metrics , filling metric selection options   $http.get("https:localhost:8080/metering/data/")     .success(function(response) {       $scope.metrics = response.nova_meters.concat(response.glance_meters).concat(response.cinder_meters).concat(response.ipmi_meters).concat(response.neutron_meters).concat(response.swift_meters).concat(response.kwapi_meters);       $scope.metric = $scope.metrics[0];     });    // fetching list of instances , filling group selection options   $http.get("https:localhost:8080/metering/project/")     .success(function(response) {       //alert(json.stringify(response[0].instances));       $scope.groups = response[0].instances;       $scope.group_by = $scope.groups[0];          });  var url = "localhost?" + "meter=" + $scope.metric.label + "&group_by=project" ; console.log(url); 

i want make selection option following ...

html

<div ng-controller="ceilometerctrl">     <select ng-model="metric" ng-options="value.label group value.group value in metrics" ng-change="update()">     </select>     <select ng-model="group_by" ng-options="value.id value in groups" ng-change="update()">     </select> </div> 

as requests asynchronous, have deal callback retrieve data.

in angularjs, $http return promise, can combining them.

also, can use $q service, .all() method. method take array of promises parameter , return promise resolved when promises in parameter array resolved to.

$q

furthermore, if set properties of object, $scope.metric, have declare it, object must defined.

controller

(function(){  function controller($scope, $http, $q) {    //declare metric   $scope.metric = {};    var defer = $q.defer();    var url = '';    //declare promise   var promise1 = $http.get("path_to_url");   var promise2 = $http.get("another_path");    //declare our function callback launch when promises finished   function callback(response){     //response array of promises results, in same order      //reponse[0] promise1 result     $scope.metric.name = response[0].data.name;      //response[1] promise2 result     $scope.group_by = response[1].data.group;      url = "localhost?" + "meter=" + $scope.metric.name + "&group_by=" + $scope.group_by ;      //resolve data built url     defer.resolve(url);   }    //when promise completed, call callback function   $q.all([promise1, promise2]).then(callback);    //callback our resolve result   function print(url){     console.log(url);   }    //print data when url set   defer.promise.then(print);   }  angular .module('app', []) .controller('ctrl', controller);  })();