Resetting checkboxes in an Ionic modal

I am building my first iOS app or HTML5/iOS app with the Ionic framework. Now my app has a list of items, and each item has a modal dialog attached to it that displays a bunch of properties attached to the item. These properties can be in an on/off state, so they are presented as checkboxes, so the user can modify their state. The state of the properties are independent of the similar properties on other items, so what was the problem I faced?

Problem

Ok so lets look at the Ionic tabs sample app, that we can get once we run the following command

ionic start resetModal tabs

So amongst other things, it gives us a tab for chats, that looks something like this

Chats

Ok so lets say there was this feature that on swiping left, it would revel a modal dialog (IonicModal) that contains a list of days (checkboxes) that you can select to set the availability for each chat contact. So when you swipe left on each contact, it should present the modal dialog in it's pristine state i.e. none of the checkboxes selected.

Solution

As you can see there are two tabs titled Chats and ChatsResetModal, so what is the difference? well the difference is that, the Chats  tab does not always present the dialog in it's pristine state, assuming you go through these steps

1. you swipe left to open the modal for contact Ben Sparrow and select Monday and Tuesday close the modal  
2. Now if you open the modal for contact Max Lynx, it will open the modal dialog with Monday and Tuesday selected

The ChatsResetModal does not have this problem and it solves it by removing and re-initialising the modal dialog. 

In Chats tab, this is what the close modal function looks like, 

$scope.closeModal = function(){
  $scope.testModal.hide();
}

In ChatsResetModal, the same function is something like this,

$scope.closeModal = function(){
  $scope.testModal.remove();
}

So the openModal function in ChatsResetModal, looks something like this

$scope.openModal = function(item) {
  var modalOptions = {scope:$scope, animation: 'slide-in-up'};
  $ionicModal.fromTemplateUrl('templates/availability.html', modalOptions).then(function(dialog) {
        $scope.testModal = dialog;
        $scope.testModal.show();
    });
}




Basically what is happening there is, we are just initialising the modal dialog in the openModal function instead of initialising it in the controller and this gives us our modal in a pristine state.

Conclusion

You  an find all the source code for the Ionic project created for the purpose of this post here on Github. So is this the best way to solve this problem? I honestly do not know. From this approach, I have not noticed any performance lag or anything in the app that I am building, but I have, by no means tested this exhaustively.

There is one more approach to this and it is mentioned here by jamesdo in an answer on the Ionic forums.

If anyone reading this post has solved this problem and has a different solution to both jamesdo and I, then please leave a comment.