My AngularJS model only updates when my button is clicked twice

Question

I have a select list box, and the I have a button. Based on the button selectId , I have to filter the model which showing in the select list box.

The problem here is that the model only updates when I click this button twice. I have a filter function in GetFormsClicked which have logic regarding this.

My Angular controller is the following:

(function() {
  var controllerId = 'GroupsController';

  ig.app.controller(controllerId, ['$scope', '$log', '$http', '$compile', 'fileRvwQuestSvc', 'DataSvc',
    function($scope, $log, $http, $compile, fileRvwQuestSvc, DataSvc) {

      $scope.FrequencyMap = {
        1: "Annual",
        2: "Monthly",
        3: "Half Year"
      };

      $scope.FormMap = {
        1: "CMSMISC",
        2: "CMSFPEA",
        3: "CMSPIID",
        5: "CMSMSR",
        7: "CMSCOI"
      }

      $scope.GetAllGroupForms = function(Id) {
        var url = '/GroupForm/Details/' + Id;
        $scope.loading = true;
        DataSvc.getAjaxData(url)
          .then(function(data) {
            //success        
            $scope.GroupForm = data.data;
            $scope.GroupFormBack = data.data;
            $scope.loading = false;
          }, function(httpStatus) {
            //failed
            $scope.hasErrors = true;
            if (httpStatus === 404) {
              $scope.errorMessage = "Couldn't retrieve Users Info";
            } else {
              $scope.errorMessage = 'The system could not process your request, please try again or contact the system administrator.';
            }
            $log.warn(httpStatus);
            $scope.loading = false;
          });
      };


      $scope.availableFormsTestOriginal = [

        {
          "Id": null,
          "GroupId": null,
          "FormId": 1,
          "SortOrder": null,
          "Frequency": 1,
          "IsCollapsed": false,
          "IsDeleted": false
        },
        {
          "Id": null,
          "GroupId": null,
          "FormId": 2,
          "SortOrder": null,
          "Frequency": 1,
          "IsCollapsed": false,
          "IsDeleted": false
        },
        {
          "Id": null,
          "GroupId": null,
          "FormId": 3,
          "SortOrder": null,
          "Frequency": 1,
          "IsCollapsed": false,
          "IsDeleted": false
        }

      ]


      var AddGroupForm = function() {

        $scope.loading = true;
        var url = '/GroupForm/Create/';
        DataSvc.AddFormData(url, $scope.GroupForm)
          .then(function(data) {
            //success
            $scope.loading = false;
            //$scope.successMessage = "Form Saved Successfully";
            $scope.successMessage = "GroupForm Updated Successfully";
          }, function(httpStatus) {
            //failed
            $scope.hasErrors = true;
            if (httpStatus === 404) {
              $scope.errorMessage = "Couldn't retrieve Users Info";
            } else {
              $scope.errorMessage = 'The system could not process your request, please try again or contact the system administrator.';
            }
            $log.warn(httpStatus);
            $scope.loading = false;
          });
      }

      $scope.filterailableforms = function() {
        for (i = 0; i < $scope.availableFormsTest.length; i++) {
          for (j = 0; j < $scope.GroupForm.length; j++) {
            if ($scope.availableFormsTest[i].FormId === $scope.GroupForm[j].FormId && $scope.availableFormsTest[i].Frequency === $scope.GroupForm[j].Frequency) {
              $scope.availableFormsTest.splice(i, 1);
            }
          }
        }

      }


      activate();

      $scope.GetFormsClicked = function(selectid) {
        $scope.availableFormsTest = angular.copy($scope.availableFormsTestOriginal);
        $scope.GetAllGroupForms(selectid);
        $scope.updateavailableforms(selectid);
        $scope.filterailableforms();
      }

      function activate() {
        $scope.loading = false;
        $scope.GetAllGroup();

      }


    }
  ]);
})();

My view code is as follows:

<button ng-click="GetFormsClicked(selectedId)">Select Group <span style="color:black"></span></button>` <select size="5" multiple ng-model="available" ng-options="x as FormMap[x.FormId]+' --- '+FrequencyMap[x.Frequency] for x in availableFormsTest" style="width: 400px"></select>

My dataser code:

ig.app.factory('DataSvc', [
'$http', '$q', '$log',
function ($http, $q, $log) {
    return {
        getAjaxData: function (CtrlUrl) {
            var deferred = $q.defer();
            var rnd = ((Math.random() * 1000000) + 1);
            $http({
                method: 'GET',
                url: CtrlUrl + "/?r=" + rnd
            })
            .then(function (data, status, headers, config) {
                deferred.resolve(data, status, headers, config);
            },
            function (data, status, headers, config) {
                $log.warn(data, status, headers(), config);
                deferred.reject(status);
            });
            return deferred.promise;
        },
        AddFormData: function (CtrlUrl, model) {
            var deferred = $q.defer();
            $http.post(CtrlUrl, model).then(function (data, status, headers, config) {
                deferred.resolve(data, status, headers, config);
            },function (data, status, headers, config) {
                $log.warn(data, status, headers(), config);
                deferred.reject(status);
            });
            return deferred.promise;
        },
        UpdateFormData: function (CtrlUrl, model) {
        var deferred = $q.defer();
        $http.post(CtrlUrl, model).then(function (data, status, headers, config) {
            deferred.resolve(data, status, headers, config);
        },function (data, status, headers, config) {
            $log.warn(data, status, headers(), config);
            deferred.reject(status);
        });
        return deferred.promise;
    }
    }
}]);

Answer 1

Your problem is due to the use of ng-model="variable" .

The rule is "always have a dot in your ng-model", you should have a ng-model="obj.variable" with the correct obj.

The reason is that each directive with scope:true inherits the parent scope, and the "variable" you are editing isn't copied back to the parent.

The problem is due to the fact that the strings are copied by value. By using an object, all the scope will reference the same variable.