Bootstrap Modal UI not updating when the scope variable is updated in angular using setTimeout and $scope.$apply()

Question

I have some issues on my bootstrap modal using angular js on which I would like to better understand why the scope variable is not updating. I have a page (let's call it main page) on which it contains a dropdown on which I can choose an entry.

   <p>@{{serv_id}}</p>
<select class="form-control" id="serv" ng-model="service_id" ng-change="selectServ()">
        <option value="179">Serv 1</option>
        <option value="180">Serv 2</option>
        <option value="181">Ser 3</option>
</select>
 <a href="" class="btn-getnum" data-toggle="modal" data-target="#remote-serv-modal">
     Get this serv <span class="glyphicon glyphicon-save"></span>
 </a>

When the user selects an entry, the ng-change="selectServ()" function is triggered. Here is the code for the function which is a part of ng-controller="servController" :

$scope.selectServ = function(){
      serv_id = $('#serv').val();
         $http.get('/serv/next-serv/' + serv_id).success(function(response){
            setTimeout(function(){
               $scope.serv_id = serv_id;
               $scope.$apply()
               $scope.selectServ();
            }, 5000);

        });
    };

When the user selects an entry, <p>@{{serv_id}}</p> found on the main page updates the output. However, the scope variable $scope.serv_id which is found on my modal which is included in my main page using @include('modals.remote-queue-modal') does not update.

Here is the code for the modal which is found on another blade:

<div class="modal fade" id="remote-serv-modal" tabindex="-1" ng-controller="servController">
      @{{serv_id}}
</div>

I didn't include all the codes of my modal, but it has all the elements of a bootstrap modal (dialog, header and content). The important part of the code above is that it has a ng-controller and the scope variable.

What am I doing wrong? Anyone who can point me to a resource is much appreciated.

Answer 1

The main problem that you are having is you are operating on things outside of angular so you either need to $apply your changes through a timeout or just do things more in an angular way.

Quick answer

angular.module('snrApp').controller("servController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
    $scope.selectServ = function(){
        var serv_id = $('#serv').val();
        $http.get('/serv/next-serv/' + serv_id).success(function(response){
            $timeout(function(){
                $scope.serv_id = serv_id;//what's the point of this?
            , 5000);
        });
    };
}]);

I also modified the code to be more inline with the angular way.

Better Answer

your modified html code

<p>@{{serv_id}}</p>
<select class="form-control" id="serv" ng-model="service_id" ng-change="selectServ(service_id)">
        <option value="179">Serv 1</option>
        <option value="180">Serv 2</option>
        <option value="181">Ser 3</option>
</select>
 <a href="" class="btn-getnum" data-toggle="modal" data-target="#remote-serv-modal">
     Get this serv <span class="glyphicon glyphicon-save"></span>
 </a>

your controller

angular.module('yourApp').controller("servController", ['$scope', '$http', '$timeout', 'yourServletService', function ($scope, $http, $timeout, yourServletService) {
    $scope.selectServ = function(service_id){
        yourServletService.get(service_id, function(servlet){
            $scope.serv_id = service_id;//what's the point of this?
        });
    };
}]);

example service for your servlet

angular.module('yourApp').factory("yourServletService", [
    '$http', function($http) {
        return (function(ext) {
            return ({
                get: get
            });

            function get(service_id, success, error) {
                var request = $http('/serv/next-serv/' + service_id);
                return request.then(function(res){
                    if(success){
                        success(res.data);
                    }
                }, function(res){
                    if(error){
                        error(res.data);
                    }
                });
            };
        });
    }
]);

Also I don't know if it is on purpose or not but you have both "service_id" and "serv_id" which will be the same most of the time.