try this way
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<thead>
<tr>
<th ng-click="sortRdata('StoreNum')">Store Number</th>
<th ng-click="sortRdata('OperatingHours')">opening closing time</th>
<th ng-click="sortRdata('AvgCustNum')">opening closing time</th>
<th ng-click="sortRdata('Profit')">Profit (%)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in StoreReports|orderBy:sortRcolumn:reverseRsort ">
<td>{{::r.StoreNum}}</td>
<td>{{::r.OperatingHours}}</td>
<td>{{::r.AvgCustNum}}</td>
<td>{{::r.Profit}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.sortRcolumn = "StoreNum";
$scope.reverseRsort = false;
var data = [
{ StoreNum: 1, OperatingHours: '8--10', AvgCustNum: 100, Profit: 23 },
{ StoreNum: 2, OperatingHours: '9--10', AvgCustNum: 70, Profit: 15 },
{ StoreNum: 3, OperatingHours: '10--10', AvgCustNum: 60, Profit: 8 },
{ StoreNum: 4, OperatingHours: '8--8', AvgCustNum: 95, Profit: 20 },
{ StoreNum: 5, OperatingHours: '8--9', AvgCustNum: 70, Profit: 17 },
{ StoreNum: 6, OperatingHours: '9--9', AvgCustNum: 85, Profit: 19 },
];
var newData = [];
for (var i = 0; i < data.length; i++) {
var obj = data[i];
obj.OperatingHoursNumber = parseInt(obj.OperatingHours.split('--')[0]);
newData.push(obj);
}
$scope.StoreReports = newData;
$scope.sortRdata = function (column) {
if (column == 'OperatingHours')
column = 'OperatingHoursNumber'
$scope.reverseRsort = ($scope.sortRcolumn == column) ? !$scope.reverseRsort : false;
$scope.sortRcolumn = column;
}
});
</script>
</body>
</html>