Angular - linking to a ngInclude partial <p>I have followed the documentation on setting up <a href="https://docs.angularjs.org/api/ng/directive/ngInclude" rel="nofollow"><code>ngInclude</code></a> and have it working (loading in HTML partials) and changing the partial when a select option is changed.</p> <pre><code>$scope.templates = [ { name: 'Overview', url: 'partials/project/overview.html' }, { name: 'Tasks', url: 'partials/project/tasks.html' } ]; $scope.template = $scope.templates[0]; ---- &lt;div ng-controller="Tasks"&gt; &lt;select ng-model="template" ng-options="t.name for t in templates"&gt; &lt;option value=""&gt;(blank)&lt;/option&gt; &lt;/select&gt; &lt;section ng-include="template.url"&gt;&lt;/section&gt; &lt;/div&gt; </code></pre> <p>However, I don't want to use a select menu to navigate. I want to use an unordered list. I tried using <code>ngHref</code>, but that doesn't seem to work. I can't find much documentation on binding an element to change an <code>ngInclude</code> partial, but maybe I'm searching for the wrong thing.</p> <p>Any help on how I could use anchor tags to change the partial being loaded in on click would be great.</p> <p>Here's the structure I was playing around with:</p> <pre><code>&lt;ul class="header-menu"&gt; &lt;li&gt;&lt;a ng-modal="template" ng-href="{{template[0]}}" class="selected"&gt;Overview&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a ng-modal="template" ng-href="{{template[1]}}"&gt;Tasks&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>