title: Change contents of ng-view inside ng-view
body: <p>Good Day,</p>
  
  <p>I'm trying to create an SPA with Angular.  Here is my index.html page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="onlineApp"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Online&lt;/title&gt;
      &lt;link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css"&gt;
      &lt;link rel="stylesheet" href="css/mystyle.css"&gt;
      &lt;base href="/Client/"&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mainController"&gt;
  
  &lt;div class="container"&gt; &lt;!--- This is the box login  --&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="components/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="components/angular-route/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is app.js:</p>
  
  <pre><code>var onlineApp = angular.module('onlineApp', ['ngRoute']);
  
  onlineApp.controller('mainController', function($scope) {
      $scope.message = 'Test Message';
  });
  
  onlineApp.controller('signupController', function($scope) {
      $scope.message = 'Sign up Message';
  });
  
  onlineApp.config(function($routeProvider, $locationProvider) {
      $routeProvider
          .when('/', {
              templateUrl: 'pages/home.html',
              controller: 'mainController'
          })
          .when('/signup', {
              templateUrl: 'pages/signup.html',
              controller: 'signupController'
          })
          .otherwise({
              redirectTo: '/'
          });
  
          // use the HTML 5 History API
          $locationProvider.html5Mode(true);
  });
  </code></pre>
  
  <p>My problem is:  Inside the contents of the ng-view (home.html), I have a button.  When I click the button, I want to go to a signup page as defined in the route handler and it's not working.  I think the problem is "inside" the ng-view.</p>
  
  <p>EDIT:
  Here's a snippet of pages/home.html:</p>
  
  <pre><code>&lt;div class="pull-right col-md-4"&gt;
      &lt;label class="pull-right col-md-12 create-monthly"&gt;Create a Monthly Parker Account&lt;/label&gt;
      &lt;a id="btn-create" class="btn btn-primary" href="#signup" &gt;
      Create Account
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html
  END EDIT:</p>
  
  <p>All of the examples I see of ng-view being used is when the links are <em>outside</em> of the ng-view.</p>
  
  <p>Can I change the contents of ng-view while I'm <em>inside</em> the ng-view itself?  Or is there some sort of project that would allow me to do that.</p>
  
  <p>TIA,</p>
  
  <p>coson</p>