title: Create next/back button for views
body: <p>I'm currently learning angular and I want to create next/back button for showing different views.</p>
  
  <p>I have a <em>template</em> called <code>example.html</code> </p>
  
  <pre><code>&lt;h1&gt;{{ message }}&lt;/h1&gt;
  </code></pre>
  
  <p>that is used by multiple controllers:</p>
  
  <pre><code>app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
  
      $routeProvider.
          when('/', {
              templateUrl: '/partials/home.html'
          }).
          when('/first', {
              templateUrl: '/partials/example.html',
              controller  : 'firstController'
          }).
          when('/second', {
              templateUrl: '/partials/example.html',
              controller  : 'secondController'
          }).
          when('/third', {
              templateUrl: '/partials/example.html',
              controller  : 'thirdController'
          }).
          otherwise({
              redirectTo: '/'
          });
  
          $locationProvider.html5Mode(true);
      }
  ]);
  </code></pre>
  
  <p>And I have a <code>header.html</code> that it's included in my <code>index.html</code>:</p>
  
  <pre><code>&lt;a href="" data-ng-click="goBack()"&gt; Next &lt;/a&gt;
  &lt;a href="" data-ng-click="goNext()"&gt; Back &lt;/a&gt;
  </code></pre>
  
  <p>And this are the controllers:</p>
  
  <pre><code>app.controller('firstController', function($scope, $anchorScroll, $location) {
      $anchorScroll();
      $scope.message = 'First Controller';
  
      $scope.goBack = function() {
          $location.path('/third');
      };
  
      $scope.goNext = function() {
          $location.path('/second');
      };
  });
  
  app.controller('secondController', function($scope, $anchorScroll, $location) {
      $anchorScroll();
      $scope.message = 'Second Controller';
  
      $scope.goBack = function() {
          $location.path('/first');
      };
  
      $scope.goNext = function() {
          $location.path('/third');
      };
  });
  
  app.controller('thirdController', function($scope, $anchorScroll, $location) {
      $anchorScroll();
      $scope.message = 'Third Controller';
  
      $scope.goBack = function() {
          $location.path('/second');
      };
  
      $scope.goNext = function() {
          $location.path('/first');
      };
  });
  </code></pre>
  
  <p>And this works fine. </p>
  
  <p><strong>My question</strong> is if this is a good way of doing this or there is a better way?</p>