Refresh ng-repeat data

Question

I have a big list containing all of my data, and I have another shorter list containing only the selected data. Originally, all the data is selected so both lists are identi

Answer 1

Your issue because of index update, so try track by $index, should work.

<label ng-repeat="region in selected_brain_regions track by $index">
    <input type="radio" name="radio_brain_regions_graphical_search_soma" value="{{region.id}}">
    <b>{{region.name}}</b>
</label>

Check out jsFiddle

Answer 2

Just try to use $rootScope. Because you give the ng-controller="BrainRegionsCtrl" for two div that's why the $scope.selected_brain_regions will go to the initial state in the second div.

OR

you should give the ng-controller="BrainRegionsCtrl" to the root div which contains the two parts of your code..

Answer 3

AngularJS promises already call .apply() on their callbacks. You cannot call .apply again inside the callbacks since they're already being .applied, and the error "In Progress" tells exactly that. Just remove the .apply call and it will work, unless you have further errors.

Answer 4

Please check with this code and let me know whether it solves your issue. Also please check this working plnkr of your example scenario.

Template:

    <div ng-repeat="region in brain_regions">
        <label>
           <input type="checkbox"
              name="checkbox_brain_region[$index]"
              id="checkbox_brain_region[region.id]"
              value="region.id"              
              ng-model="region.show"
              ng-change="update_selected_Brain_regions(region)">                           
           <b>{{region.name}}</b>
         </label>
    </div>
    <br>
    <label ng-repeat="region in selected_brain_regions">
        <input type="radio" name="radio_brain_regions_graphical_search_soma[$index]"
        ng-model="region.show" value="region.id">
        <b>{{region.name}}</b>
    </label>

Controller:

$scope.update_selected_Brain_regions = function (region) {
    for (var i = 0; i < $scope.brain_regions.length; i++) {
        var current_region = $scope.brain_regions[i];
        if (current_region.id === region.id) {
            if (region.show) {
                $scope.selected_brain_regions.push(current_region);
            } else {
                var index = $scope.selected_brain_regions.map(function(x){ return x.id; }).indexOf(current_region.id);
                $scope.selected_brain_regions.splice(index,1);
            }
        }
    }
};