javascript - Dynamically updating an ng-include -

this should easy 1 knows angular--i, on other hand, super new it. trying put easy example using ng-include it's not clear why variable inside include not updating.

i include html in page (not sure if ng-model necessary):

<div ng-model="template" ng-include="template.url"></div>

i have button:

<a class="btn btn-lg btn-success" ng-model="template" ng-click="switch()" ng-href="#">change!</a>

that calls function controller looks this:

app.controller('mainctrl', function ($scope) {         $scope.templates =         [ { name: 'template1', url: 'views/template1.html'},         { name: 'template2', url: 'views/template2.html'} ];      $scope.template = $scope.templates[0];      $scope.switch = function() {         $scope.template = $scope.templates[1];         console.log($scope.template);         return $scope.template;     }; } 

);

the variable shows in console? correct. nothing changes on page.

update: code works. what's required removal of href attribute, in cases reloading page. if that's true, there way in there failsafe? i.e. href works fine without javascript, ng-include works when javascript working?

it looks okay, try in plunkr. thing changed url templates.

---

here fiddle showing works , without ng-href.
<a class="btn btn-lg btn-success" ng-click="switch()" ng-href="#">change!</a>
<a class="btn btn-lg btn-success" ng-click="switch()">change!</a>
after seeing sunil's comment, added in bootstrap css make clear href not needed desired styling. can removed without problems. but, unfortunately, plnkr , jsfiddle not reproducing reload experienced.