How to load a new view template on click of button using ng-view

Question

I have a list of buttons in Index page.

I have a button click event for each of button.

When i click the button , i need to load a view

I have a ng-view section in my index.html and need to load new view template upon click of button

Please find below code :

<div class="container ">
  <div class="panel panel-primary ">
    <div class="panel-heading" style="padding-bottom: 18px;">
    </div>
    <div class="panel-body" style="height: 100%;">
      <table>
        <tr>
          <td style="width: 22%;">
            <div class="btn-group" ng-controller="MainContoller">
              <h4 style="color: blue; font-family: 'Comic Sans MS'; text-align: center;">Demos</h4>
              <br />
              <button type="button" class="btn btn-primary">Traditional</button>
              <button type="button" ng-click="ChangeView()" class="btn btn-primary">1-Way Data Binding</button>
              <button type="button" class="btn btn-primary">2-Way Data Binding</button>
            </div>
          </td>
          <td rowspan="10" style="text-align: center; vertical-align: middle;">
            <div style="border-style: solid; border-width: thin; border-color: aquamarine; vertical-align: middle;" ng-view="">
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Controllers

DemoControllers.controller('MainContoller', function ($scope, $location) {
    $scope.ChangeView = function () {
        $location.url('1WayDataBinding');
    }
});

When i click on button , it is hitting main contoller and also calling Chage view function , but it is not loading the view 1WayDataBinding.html in the ng-view section

Please suggest where i am going wrong

Answer 1

You have missed to add routing configuration as follows. Please add the following and check it.

DemoControllers.config(function($routeProvider) {
  $routeProvider.when('/1WayDataBinding', {
    templateUrl: '1WayDataBinding.html'
  });
});