Trouble with Angular js Routing

I have an app that I'm trying to wire up as a single page app with the help of Angular's $route service. This is the code pertinent to this question:

<div class="toolbar">

<!-- link below should change the view and trigger the loading of the other template-->
 <a class="nav-link" href="./#/program">Other view</a>
</div>

 <main ng-view>
<!-- this container should have both templates loaded dynamically-->
</main>

The JavasScript:

//this config function is chained to a module definition (not included for the sake of brevity in this example)
.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider
      .when('./#/program', {
        templateUrl: 'partials/program-evaluation.html'
      })
      .when('/', {
        templateUrl: 'partials/speaker-evaluation.html'
      });
     //.otherwise({redirectTo: '/'});
  }]);

The Problem:

The "home" template is loaded just fine when I start up the app. Which means that the route service is properly imported and that the config function above is indeed working for the home template, and that the path to the templates is also working.

HOWEVER, when I click the link that should load up the new view (by changing the url to /#/program), the home template disappears (which is what I want) but the "main" container with the ng-view attribute, which is where all templates should be loaded ALSO disappears from the DOM.

What could be wrong? I'm so confused and I've read the Angular Docs and I haven't been able to figure it out.