Sometimes when I click AngularJS links, the page reloads - angularjs

Question

I have a single-page app that has several views. On one view, I list all the orders, on another page, I modify those orders. I want to be able to go between the two pages without needing to save any data to a database.
On my development box, this works well. I just save the orders on $window and when I load the details page, I look through window.orders for it. Great. However, when deployed, all my links act like they link to a new page... so the page reloads. This means that when I try to link from my main list page to my details page, the details page doesn't get access to anything on window. Isn't the whole point of a single page app that it doesn't reload the page when changing views? How do I get my links to not load a new page? they're all in the format of text.
So here's part of my orders-list.template.html:
<table class="table-bordered" id="TheTable">
<tr>
<th>Part #</th>
<th>Customer</th>
<th>Job #</th>
<th>Due Date</th>
<th ng-repeat="day in days" class="td-nowrap">{{day}}</th>
</tr>
<tr ng-repeat="order in orders | orderBy:'DueDate'">
<th>{{order.PartNumber}}</th>
<td>{{order.Customer}}</td>
<td class="td-nowrap">{{order.JobNumber}}</td>
<td>{{order.DueDate|date:'shortDate'}}</td>
<td ng-repeat="day in days">
<input type="number" style="width:60px;" ng-model="order.Weeks[day].Pieces" ng-change="calculateHoursOfWork();"/>
{{(order | runTimePlusSetupPlusEfficiency:options:order.Weeks[day].Pieces) | number:3}}
</td>
</tr>
</table>
Note that the part number is a link to #!/orders/{{order.ID}}. I was under the impression this link wouldn't reload the web page.
This is in my main script:
$routeProvider.
when("/orders", {
template: "<orders-list></orders-list>"
}).
when("/orders/:orderId", {
template: "<order-detail></order-detail>"
}).
when("/options", {
template: "<options></options>"
}).
when("/printable", {
template: "<orders-printable></orders-printable>"
}).
otherwise("/orders");
So it should be clear that /orders refers to my ordersDetail component. Here's part of it:
angular.module("orderDetail").component("orderDetail", {
templateUrl: "AngularModules/order-detail/order-detail.template.html",
controller: ['$routeParams', "$http", "$window", function OrderDetailController($routeParams, $http, $window) {
var self = this;
self.TotalNonSetupRunTime = 0.0;
self.options = $window.options;
self.order = null;
$.each($window.orders, function (idx, elem) {
if (elem.ID == $routeParams.orderId) {
self.order = elem;
}
});
if (self.order === null) {
var orderID = null;
if ($routeParams.hasOwnProperty('orderId')) {
orderID = $routeParams.orderId;
}
var windowOrders = "undefined";
if ($window.hasOwnProperty('orders')) {
windowOrders = $window.orders.length;
}
alert("couldn't find order " + orderID + " among " + windowOrders + " orders! try going back and selecting again.");
}
}]
});
because the page is getting reloaded, I'm seeing windowOrders as undefined. Is there some setting in IIS I could change to make links to #<something> not reload the page (as expected)? or do I have to do something on the angularJS side?
Confounding it further... I did find this: hash link reloads page and apparently having a <base> directive screws with this? is there an angular-safe way to do this? I don't think it would make sense to get rid of that directive. I'm actually writing this on an asp.net-MVC page, so I have
<base ng-href="#Url.HttpRouteUrl("Default", new { }).Replace("?httproute=True", "")" />
in my _Layout.cshtml page. This way when it gets deployed (to http://<server>/<app>/) it works as well as when I'm debugging (on locahost:<some port>/).