$scope updates not shown in Angularjs

Question

$scope doesn't seems to sync with updates in Angularjs.

I update my time values (myst and myet) using ui.bootstrap.timepicker, then when I display userscheds[index] using alert(JSON.stringify($scope.userscheds[index]));, only the original values are displayed. Something I'm missing?

Any help would be appreciated

See my plunker or code below

update #1

Comment from @dgig to remove this. in ng-model="this.myst". Changed to ng-model="myst"

But my $scope still not shown with the updates done

html modal

<div class="container" ng-app="appUserSchedule">
<div ng-controller="CtrlUserSchedule" >

<div class="row">
      <ul>
        <li ng-repeat="x in userscheds">{{x.week_day}} {{x.time_start}}-{{x.time_end}}
            <span ng-click="ctrl.showModal($index)" style="cursor:pointer;">Edit</span>
            <span ng-click="ctrl.removeItem($index)" style="cursor:pointer;">Delete</span>
        </li>
      </ul>
</div>


<!-- Modal -->  
<script type="text/ng-template" id="modalContent.html">
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
  <timepicker ng-model="myst" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</div>
<div class="col-sm-6">
  <timepicker ng-model="myet" hour-step="1" minute-step="15" show-meridian="true"></timepicker>
</div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="$close()">OK</button>
  <button class="btn btn-primary" ng-click="saveUserScheduleEntry()">Save</button>
</div>

js

var app = angular.module("appUserSchedule", ['ui.bootstrap']); 
app.controller("CtrlUserSchedule", function($scope,$http,$location,$modal) {

$scope.ctrl = this;

$http.get('userschedule.json').success(function(data, status, headers, config) {

    $scope.userscheds = data.userschedules;

    //console.log(data);
}).error(function(data, status, headers, config) {
    console.log("No data found..");
});


  // Show modal 
  this.showModal = function (index) {

  var modalInstance;

  modalInstance = $modal.open({
    templateUrl: 'modalContent.html',
    controller: 'CtrlUserSchedule',
    scope: $scope 
  });

  objts   = new Date($scope.userscheds[index].datetime_start);           
  objte   = new Date($scope.userscheds[index].datetime_end);       

  $scope.myst = objts;
  $scope.myet = objte;


      // Save User Schedule Entry details after making a change, then close modal    
      $scope.saveUserScheduleEntry = function() { 

      // Displays original value, but where are my updated values?
       alert(JSON.stringify($scope.userscheds[index]));

         $http.put('userschedule.json',index).success(function(eventsuccess){
       }).error(function(err){
           /* do something with errors */
       });

       modalInstance.close();
     };   

}

json

{
"userschedules":[
  {
     "id":1,
     "week_day":"Monday",
     "datetime_start":"2016-03-08T08:00:00-05:00",
     "datetime_end":"2016-03-08T12:00:00-05:00",
     "time_start":"08:00",
     "time_end":"12:00"
  },
  {
     "id":21,
     "week_day":"Monday",
     "datetime_start":"2016-03-08T13:00:00-05:00",
     "datetime_end":"2016-03-08T17:00:00-05:00",
     "time_start":"13:00",
     "time_end":"17:00"
  }, ...