ng-repeat not reordering when change is made to underlying array - angularjs

Question

I'm using ui.sortable to display a reorderable list of items. I get my data like this:
context.rules.getAll()
.then(
function (data) { // success
$scope.rules = data;
cachedRules = data.slice();
$scope.loaded = true;
},
function (response) { // failure
console.log(response);
});
I use cachedRules so I can compare the array that is being reordered to the original and detect if a change has been made or not. My view looks like this:
<tbody ui-sortable="sortableOptions" ng-model="rules">
<tr ng-repeat="rule in rules|orderBy:'RuleSequence'" ng-class="{'unsortable': !reorder, 'inactive': !rule.Active}">
<td><i ng-show="reorder" class="fa fa-reorder"></i></td>
<td>{{rule.RuleSequence}}</td>
<td>{{rule.ProxyType}}</td>
<td>{{rule.ProxyDesc}}</td>
<td>
<i class="fa fa-download" title="Download CSV" ng-click="getAssignments(rule.RuleID)"></i>
<i class="fa fa-gears" title="Edit Rule" ng-click="editRuleShow(rule)"></i>
</td>
</tr>
</tbody>
Whenever something is reordered, this code gets called so that RuleSequence (what I'm using in my OrderBy) is updated:
$scope.rules.map(function (r) {
r.RuleSequence = $scope.rules.indexOf(r) + 1;
return r;
});
And then a "Save" button becomes enabled if the order of $scope.rules is different from cachedRules. This all works perfectly.
However, I want to have a "Cancel" button that when clicked will revert the display on the page to the original order. Given that I store a copy of the original data this should be easy, I use ng-click to do $scope.rules = cachedRules.slice();, however the order isn't updated on the page after I do that, is stays in it's changed state even though $scope.rules is back to it's unchanged state. How can I get the display to revert back to its original order?

Answer 1

After looking further, it looks like .slice() doesn't do a deep-copy like I thought it did (my in-experience with javascript shining through). So when I did my initial get of the data, and set cachedData, the array itself wasn't a reference but the objects inside of the array still were, so when I updated them here
$scope.rules.map(function (r) {
r.RuleSequence = $scope.rules.indexOf(r) + 1;
return r;
});
It was updating both, so cachedRules would have the updated RuleSequence. When I clicked "Cancel" and set it back to cachedRules, RuleSequence would remain the same. So when I do a proper deep copy there with loDash
context.rules.getAll()
.then(
function (data) { // success
$scope.rules = data;
cachedRules = _.cloneDeep($scope.rules);
$scope.loaded = true;
},
function (response) { // failure
console.log(response);
});
Everything went off without a hitch.