how to change view /model on button click?

Question

I make a simple demo in which one button present "openpopup" .On click button a pop up screen is display in which user can select multiple element .Initially first and second by default selected .If you run application you will notice there is two column also present. (It is because first two option are selected in multiple selected box).When you open the pop up and select third option it automatically create third column in view .I want this should happen only button click "select" button on pop up screen .In other words when user select or dissect the check box it automatically reflect in model and display in view .I want it will not reflect on view till user didn't press "select" button .I want every thing after "select" button

here is my code

 <button ng-click="openPopover($event)">
      openpopup
     </button>
         <script id="my-column-name.html" type="text/ng-template">
        <ion-popover-view>
            <ion-header-bar>
                <h1 class="title">My Popover Title</h1>
            </ion-header-bar>
            <ion-content>
                <ul class="list" ng-repeat="item in data">

                    <li class="item item-checkbox">
                        <label class="checkbox">
                            <input type="checkbox" ng-model="item.checked" ng-click="itemCheckedUnCheckedhandler(item)">
                        </label>
                        {{item.label}}
                    </li>
                </ul>
                <button ng-click="closePopover()">select</button>
            </ion-content>

        </ion-popover-view>
    </script>

Answer 1

The best way, in my opinion, would be to bind the checked items to a mediating variable (checkedItems in this example), that doesn't immediately affect the view

<input type="checkbox" ng-model="checkedItems[$index]" ng-click="checkboxClicked($index)">

"checkboxClicked" function simply updates the checked status of the current item

  $scope.checkcoxClicked = function(n){
    $scope.checkedItems[n] = !$scope.checkedItems[n];
  };

And on popup close (NOTE that function is invoked only on "select" button click and not when clicking outside the popup), we simply update the view-binded data variable with the new checked / unchecked statuses

$scope.closePopover = function() {
   for (var i = 0; i < $scope.data.length; i++){
        $scope.data[i].checked = $scope.checkedItems[i];
   }
   $scope.popover.hide();
};

Here's a working plunker .

Answer 2

you just change little bit on your code: like: //***for html template <input type="checkbox" ng-model="item.tempChecked" ng-click="itemCheckedUnCheckedhandler(item)">

// *for Controller
//****Add one new field("tempChecked") on your data object*
$scope.data = [{ "label": "Invoice#", "fieldNameOrPath": "Name", "checked": true, 'tempChecked': true }, { "label": "Account Name", "fieldNameOrPath": "akritiv__Account__r.Name", "checked": true, 'tempChecked': true }, { "label": "Type", "fieldNameOrPath": "Type__c", "tempChecked": false, 'checked': false }, { "label": "SO#", "fieldNameOrPath": "akritiv__So_Number__c", 'checked': false, "tempChecked": false }]

//****"some change on your select button"***
$scope.closePopover = function() { for (var d in $scope.data) { if ($scope.data[d].tempChecked == true) { $scope.data[d].checked = true; } else { $scope.data[d].checked = false; } } $scope.popover.hide(); };