Susheel Singh Susheel Singh - 1 year ago 89
Ajax Question

unable to get updated scope value after ajax call

I tried the below code. I have searched for answers for answer and solutions to use $apply, $timeout but anything didn't work in my case. I am getting bunch errors.


var app = angular.module("test",[])
app.config(function($routeProvider, $locationProvider) {
.when('/', {
templateUrl: 'login.html',
controller: 'loginCtrl'

app.controller("loginCtrl",["$scope","$http","$location",function($scope,$http,$sessionStorage,$location,$timeout) {
$scope.loginSuccess = false;
$scope.loginAuthencation = function(){
method: 'post',
}).then(function successCallback(successResponse) {
$scope.loginSuccess = true;
} else {
$scope.loginSuccess = false;
}, function errorCallback(response) {
$scope.loginSuccess = false;

index.html :

<div ng-view></div>


<img src="img/logo.png" alt="appicon"/>
<div class="sub-element">
<p><input type="text" name="username" placeholder="username" ng-model="username"/></p>
<p><input type="password" name="password" placeholder="password" ng-model="password"/></p>
<input type="checkbox" value="Remember Me" class="item-left"/>Remember Me
<p class="submit-btn"><input type="submit" id="login-form" value="Login" ng-click="loginAuthencation()" /></p>

value is not getting updated...

Answer Source

You have <p>{{loginSuccess}}</p> outside your ng-view. Therefore loginCtrl's scope won't be accessible. Either access <p>{{loginSuccess}}</p> inside login.html or use $rootScope.loginSuccess so that it works everywhere.