angular : $scope is not reading values from HTML

Question

I have this code where I am expecting some data from the View/HTML but the variable $scope.cityName is undefined.

app.controller("citycontroller", function ($scope, cityfactory) {
        $scope.searchByCid = function () {
            console.log("Checking for city data");
            var promise = cityfactory.serverCall($scope.cityName);
            promise.then(function (data) {
                $scope.result = data.data;
                console.log($scope.result);
            }, function (error) {
                $scope.error = error;
            });
        };
        console.log($scope.cityName);
    });

Here is the HTML

<div>
            <input type="text" ng-model="cityName" placeholder="Search places.." ng-init="cityName='Delhi'">
            <button ng-click="searchByCid()" id="checkcity">Check</button>
        </div>

is $scope.result data correct in your console ?

Modar Na
– Modar Na

2017-03-26 17:50:14 +00:00
Commented Mar 26, 2017 at 17:50 — Modar Na
– Modar Na, Commented Mar 26, 2017 at 17:50

RIYAJ KHAN · Accepted Answer · 2017-03-26 17:55:15Z

1

console.log($scope.cityName);

This statement is not part of any change event handler or function that digestion cycle to cause run.

Your cityName is changing.If you want check it in JS :

$scope.callMe = function(){
   console.log($scope.cityName);
}

HTML :

Use ngChange

<input type="text" ng-model="cityName" placeholder="Search places.." ng-init="cityName='Delhi'" ng-change="callMe()">

OR Simply check in html using interploation:

<span>{{cityName}} </span>

OR

use $scope.$watch in JS.

$scope.$watch('cityName',function(oldVal,newVal){

    console.log(newVal); //it will print new updated cityname
})

answered Mar 26, 2017 at 17:55

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fabian Venturini Cabau · Accepted Answer · 2017-03-26 17:59:04Z

0

Create an object in your controller instead of using a single variable $scope.cityName. Try to use something like $scope.data.cityName, changing your ng-model to data.cityName. Also, try to initialize your variable in the beginning of your controller.

answered Mar 26, 2017 at 17:59

Fabian Venturini Cabau

265 bronze badges

Comments

Dhiraj · Accepted Answer · 2017-03-26 18:20:29Z

0

 console.log($scope.cityName);

This statement is outside the $scope.searchByCid function. When controller get loaded first time(While rendering html) then it is calling

console.log($scope.cityName);

Because of that it is showing undefined for $scope.cityName;

But you will be getting $scope.cityName in $scope.searchByCid because it is initialized using ng-init attribute.

Shift console.log inside your method.

answered Mar 26, 2017 at 18:20

Dhiraj

1,48212 silver badges21 bronze badges

Collectives™ on Stack Overflow

angular : $scope is not reading values from HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related