Q:

How to set previous value when cancelling a drop-down list with Angular Directive?

I have an angular directive that you add to any 'select' element to give it a cool modal pop up and add a custom message (which I omitted from this example).
I'm trying, in the directive, to make it so when the user clicks cancel the value goes back to what it was, otherwise it appears that it has changed. I can this normally in jquery without this weird modal setup I have
Here's a working plnkr with info - http://plnkr.co/edit/JRi5AsarX9AztCWLx1QR?p=preview
Angular Directive:
angular.module('plunker', ['ui.bootstrap']).directive('ngConfirmClick', ['$modal',
    function($modal) {

    return {
        restrict: 'A',
        scope:{
            ngConfirmClick:"&",
            item:"="
        },

        link: function(scope, element, attrs) {

            if(element.context.tagName == 'SELECT'){

                $("select").change(function() {

                        var ModalInstanceCtrl = function($scope, $modalInstance) {
                            $scope.ok = function() {
                                $modalInstance.close();
                            };
                            $scope.cancel = function() {
                                $modalInstance.dismiss('cancel');
                            };
                        };

                    var message = attrs.ngConfirmMessage || "Are you sure ?";

                    var modalHtml =  '<div class="modal-header" id="confirm-box"><h4 id="title-color" class="modal-title"><i class="fa fa-exclamation"></i> Please Confirm</h4></div><div class="modal-body">' + message + '</div>';
                        modalHtml += '<div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>';

                    var modalInstance = $modal.open({
                        template: modalHtml,
                        controller: ModalInstanceCtrl
                    });

                    modalInstance.result.then(function() {
                        scope.ngConfirmClick({item:scope.item}); 
                    }, function() {
                    });
                    });
                }

            }
        }
    }
]);

HTML
  <div ng-controller="ModalDemoCtrl">
    <b>This is the list I'm looping through:</b> <h3>{{peoples}}</h3>

         When I cancel I want to return to the value Sam or whatever value was selected at the time of cancel.

        <select ng-confirm-click="sendPost()" ng-model="selectedPerson" class="form-control-dropdown" ng-options="people as people for people in peoples"></select>

  </div>

controller:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.selectedPerson = 'Sam';
  $scope.peoples = ['Sam', 'Randy', 'Joe'] ;  

  $scope.sendPost = function(){
    console.log('this makes a POST call normally');
  };

};

I have tried a lot to get this working, some methods more hacky than other. My problem is I for some reason can't figure out, once I'm inside the $modalinstance to pass the original value

A:

Please check the updated plunker. 
I did a small change. I have added ngModel in scope variable and just maintaining the oldValue in the variable from scope.ngModel

