How to update UI using angularJs when scope value changes?

Question

$scope.setMonth = function(month){
    $scope.month = month;
    alert($scope.month);
    $scope.getMonthData();
};

$scope.getMonthData = function(month){
    // getting data for all schedules which a user can book
    $http.get('http://localhost/cakephp/Schedules/allSchedulesWithoutConflict').success(function(data) {
        $scope.allSchedules = data;
        var array1 = [];
        var date = 1;
        $scope.array2 = [];
        angular.forEach($scope.allSchedules, function(item){
            array1 = item.Schedule.start_time.split('-');
            date = array1[1];
            console.log(date);
            if(date == $scope.month){
                $scope.array2.push(item);
            }
        })
        console.log($scope.array2);
    });
};

This is my angularJs code what is happening here is that this setMonth() function is get called from the html to change the $scope.month value and by using this month value i'm filtering data in the getMonthData() function which changes array2 value, i want this change in value to get reflected on the UI

This is my html code:

`<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
	<link href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" rel="stylesheet">



		<!-- <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
		<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
		<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-sanitize.js"></script>
		<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
		<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script>
		<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>-->
		<title>Book My Class</title>
		<?php
		// echo $this->Html->css('select.min');
		// echo $this->Html->css('fullcalendar.print');
		// echo $this->Html->css('fullcalendar');
		// echo $this->Html->css('tableheader');
		// echo $this->Html->css('pendingFeeButton');
		echo $this->Html->css('table');



		echo $this->Html->css('bootstrap.min');
		// echo $this->Html->css('font-awesome.min');
		echo $this->Html->script('/libraries/moment.js');
		// echo $this->Html->script('/app/jquery.min.js');
		echo $this->Html->script('/libraries/jquery-1.11.0.min.js');

		echo $this->Html->script('/libraries/angular.js');
		echo $this->Html->script('/libraries/angular-sanitize.js');
		echo $this->Html->script('/libraries/angular-ui-router.min.js');
		echo $this->Html->script('/libraries/ui-bootstrap-tpls.js');
		echo $this->Html->script('/libraries/lodash.min.js');
		// echo $this->Html->script('/app/app.js');
		// echo $this->Html->script('/utils/select.js');
		// echo $this->Html->script('/app/schedule.js');
		// echo $this->Html->script('/app/module.js');
		// echo $this->Html->script('/app/venue.js');
		// echo $this->Html->script('/app/user.js');
		// echo $this->Html->script('/app/holiday.js');
		// echo $this->Html->script('/app/autoschedule.js');
		// echo $this->Html->script('/app/modulecycle.js');
		// echo $this->Html->script('/app/moment.min.js');
		// echo $this->Html->script('/app/fullcalendar.min.js');
		// echo $this->Html->script('/app/pendingfee.js');
		echo $this->Html->script('/StudentView/table.js');

		// echo $this->Html->script('/StudentView/classData.js');




		// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js');
		// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js');
		// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js');
		// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-message.js');
		// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-material.js');
		// echo $this->Html->script('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js');

		?>

	</head>
	<body ng-app= 'myapp'>
		<div class="page-container">

			<!-- top navbar -->
			<div class="navbar navbar-default navbar-fixed-top" role="navigation">
				<div class="container">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<h class="pull-left"><b>Alchemist Scheduler</b></h>
					</div>
					<div class="collapse navbar-collapse navbar-ex1-collapse"><a href="/cakephp-2.8.2/users/logout" ng-click="logout" class="navbar-link navbar-right">LOGOUT</a>
					</div>
				</div>
			</div>

			<div class="container" style="margin-top:40px">

				<div class="row row-offcanvas row-offcanvas-left">

					<!-- sidebar -->
					<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
						<ul class="nav">
							<li class="active"><a href="#">Dash Board</a></li>
							<li><a href="#">Book Classes</a></li>
							<li><a href="#">Attendance</a></li>
							<li><a href="#">Mentor</a></li>
							<li><a href="#">Feedback</a></li>
						</ul>

					</div>

					<div ng-controller="twoWeekClassCtrl">
						<div ng-repeat="data in classData track by $index">
							<div class="col-md-2">
								<div class="panel panel-default" >
									<div class="panel-heading">{{data.Schedule.start_time}}</div>
									<div class="panel-body">
										<ul>
											<li>{{data.Schedule.name}}</li>
											<li ng-if='data.C[0].faculty_name = null'>{{data.C[0].faculty_name}}</li>
											<li ng-if='data.C[0].venue != null'>{{data.C[0].venue}}</li>
										</ul>
										<div ng-if="data.C" ng-repeat="class in data.C" style="display : inline" >
											<i ng-if='data.Attendance[$index].is_present == false'class="fa fa-circle" aria-hidden="true" style='color:red'></i>
											<i ng-if='data.Attendance[$index].is_present == true'class="fa fa-circle" aria-hidden="true" style='color:green'></i>
											<i ng-if='data.Attendance[$index].is_present == null'class="fa fa-circle-o" aria-hidden="true"></i>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div><!--/.row-->
				</div><!--/.container-->
			</div><!--/.page-container-->




			<div class="text-center" ng-controller = 'twoWeekClassCtrl'>
				<ul class = "pagination pagination-lg">
					<li><a href = "#" ng-click= "">&laquo;</a></li>
					<li><a href = "#" ng-click="getMonthData(01)">January</a></li>
					<li><a href = "#" ng-click="getMonthData(02)">February</a></li>
					<li><a href = "#" ng-click="getMonthData(03)">March</a></li>
					<li><a href = "#" ng-click="getMonthData(04)">April</a></li>
					<li><a href = "#" ng-click="getMonthData(05)">May</a></li>
					<li><a href = "#" ng-click="getMonthData(06)">June</a></li>
					<li><a href = "#" ng-click="getMonthData(07)">July</a></li>
					<li><a href = "#" ng-click="getMonthData(08)">August</a></li>
					<li><a href = "#" ng-click="getMonthData(09)">September</a></li>
					<li><a href = "#" ng-click="getMonthData(10)">Ocober</a></li>
					<li><a href = "#" ng-click="getMonthData(11)">November</a></li>
					<li><a href = "#" ng-click="getMonthData(12)">December</a></li>
					<li><a href = "#" ng-click="" >&raquo;</a></li>
				</ul>

			</div>
			<table class="table table-striped" ng-controller = 'twoWeekClassCtrl'>
				<thead>
					<tr>
						<th> <a href="#" ng-click="sortType = 'Schedule.name'">
							Module
							<span ng-show="sortType == 'Schedule.name'" class="fa fa-caret-down"></span>
						</a></th>

						<th><a href="#" ng-click="sortType = 'Schedule.reg_start_date'">
							Start Date
							<span ng-show="sortType == 'Schedule.reg_start_date'" class="fa fa-caret-down"></span>
						</a></th>

						<th>Reg Ends</th>

						<th> <a href="#" ng-click="sortType = 'name'">
							Venue
							<span ng-show="sortType == 'name'" class="fa fa-caret-down"></span>
						</a></th>

						<th> <a href="#" ng-click="sortType = 'name'">
							Faculty
							<span ng-show="sortType == 'name'" class="fa fa-caret-down"></span>
						</a></th>

						<th> <a href="#" ng-click="sortType = 'name'">
							Book
							<span ng-show="sortType == 'name'" class="fa fa-caret-down"></span>
						</a></th>
					</tr>
				</thead>
				<tbody >
					<tr ng-repeat="data in array2  | orderBy:sortType:sortReverse" >
						<td class="filterable-cell">{{data.Schedule.name}} {{data.Schedule.start_time}}</td>
						<td class="filterable-cell">{{data.Schedule.reg_start_date}}</td>
						<td class="filterable-cell">{{data.Schedule.reg_end_date}}</td>
						<td class="filterable-cell">{{data.C[0].faculty_name}}</td>
						<td class="filterable-cell">{{data.C[0].venue}}</td>
						<td class="filterable-cell"> <button  ng-if="data.Schedule.purpose == 'book'" type="button" ng-click="book(data.Schedule.id);row.selected=!row.selected" class="pull-right btn btn-xs">
							<span ng-class=""></span>
							{{row.selected?'Cancel':'Book'}}
						</button>
						<button  ng-if="data.Schedule.purpose == 'cancel'" type="button" ng-click="book(data.Schedule.id);row.selected=!row.selected" class="pull-right btn btn-xs">
							<span ng-class=""></span>
							{{row.selected?'Book':'Cancel'}}
						</button>
					</td>
				</tr>
			</tbody>


		</div>
	</div>
</body>
</html>

output of console.log(jsonStringify(array2):

[{"Schedule":{"id":"574","created":"2015-11-17 22:00:35","modified":"2015-11-17 22:01:45","reg_start_date":"2015-11-17","reg_end_date":"2015-12-17","start_time":"2015-12-20 09:00:00","end_time":"2016-01-10 11:00:00","reg_type_id":"1","schedule_state_id":"4","error_count":"0","is_forced":null,"capacity":"25","default_backup_day":null,"default_backup_time":null,"filter_reg":null,"c_count":"4","min_batch":"15","module_id":"9","name":"DI-Logical Reasoning","description":"","reg_start_days":"33","reg_end_days":"3","instructions":"","draft_count":"0","cancel_count":"0","auto_schedule_id":null,"registration_count":"16","purpose":"book"},"C":

@JohnSmith i have edited the code, you can now see the output. — Anuj Mittal
– Anuj Mittal, Commented May 14, 2016 at 18:36
Can you please post the contents of console.log(JSON.stringify($scope.array2));? — 2ps
– 2ps, Commented May 14, 2016 at 19:41

jeremy-denis · Accepted Answer · 2016-05-14 19:06:38Z

3

when the scope change to update the view try to add in your js after the scope was updated:

$scope.$apply();

If you see $digest already in progress it's to say that your scope is already in refreshing. You don't need to call the $apply function.

try calling your scope modification inside a $timeout (don't forget to import it in your controller) it will do a "safe" scope modification

$timeout(function() {
  // run your scope modification
})

edited May 14, 2016 at 19:06

answered May 14, 2016 at 18:47

jeremy-denis

6,8963 gold badges23 silver badges37 bronze badges

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

3 Comments

jeremy-denis Over a year ago

yes it can occured because your scope refresh is in progress. try to do the $apply in a timeout

Anuj Mittal Over a year ago

nothing happened, but this time there was no error.

jeremy-denis Over a year ago

ok maybe you can try the controller as method to write your code ? you often have less issue of scope not updated.

Saad · Accepted Answer · 2016-05-15 10:21:29Z

2

You are using ng-controller multiple times in the template. When the template loads and angular finds ng-controller, the controller twoWeekClassCtrl loads again with a new $scope for each ng-controller. So, three $scope gets created and each are different from the other. And, that's why your view didn't get updated.

To solve this, you need to use one ng-controller. Place that ng-controller at the template just after body tag so that twoWeekClassCtrl loads once and only one scope gets created. Like this:

<body ng-app= 'myapp'>
    <div class="page-container" ng-controller="twoWeekClassCtrl">
    ...
    ...
    ...
    </div>
 </body>

Remove ng-controller from all other three divs.

answered May 15, 2016 at 10:21

Saad

9526 silver badges16 bronze badges

2 Comments

Anuj Mittal Over a year ago

Thank you very much it solved the problem, that was a silly mistake from my side :P

Saad Over a year ago

@AnujMittal You're welcome. Silly mistake happens. Accept the answer so that other user can know the solution. Thank you.

Collectives™ on Stack Overflow

How to update UI using angularJs when scope value changes?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related