title: Angularjs routing: TypeError: Cannot read property 'path' of undefined
body: <p>I'm new to AngularJS. Can someone help me why the following routing will not work? I have a custom directive that submits a user form. After submission, it should navigate to the success page.(views/success.html).</p>
  
  <blockquote>
    <p>I'm getting an error upon submission. TypeError: Cannot read property
    'path' of undefined</p>
  </blockquote>
  
  <p>If I simply try navigate to "/index.html#/success" on the address bar, it will not redirect to the success page, so I'm suspecting it is a routing issue but I can't seem to understand the cause of it. Any help would be greatly appreciated!</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngRoute', 'myControllers', 'loginDirective'])
      .config(function ($routeProvider) {
          $routeProvider.when("/home", {
                   templateUrl: 'index.html',
                   controller: 'myApp'
              }).when("/success", {
                  templateUrl: 'views/success.html',
                  controller: 'myApp'
              })
              // If no route is selected then use the 'home' route.
              .otherwise({ redirectTo: '/home' });
  
  
      });
  
  // Directive - Modifies HTML behaviour.
  var myDirectives = (function () {
      var myDirectives = angular.module('loginDirective', []);
  
      // directive() is a factory method to create directives.
      myDirectives.directive('login', function () {
          return {
              restrict: 'A',
              scope: {
              },
              link: function ($scope, elem, attrs, ctrl, $location) {
                  $scope.submit = function() {
                      console.log("I clicked on submit");
                      $location.path("/success");
                  }
              },
              templateUrl: function (element, attr) { return 'views/loginForm.html' },
          }
      });
      return myDirectives;
  }());
  
  // Controller - dispatches inputs and outputs.
  var myControllers = (function () {
      var myControllers = angular.module('myControllers', []);
  
      // Controllers are defined by the controller function.
      myControllers.controller('AppCtrl', ['$scope', '$routeParams','$location', function ($scope, $routeParams, $location) {
          $scope.title = "Sign in";
      }]);
      return myControllers;
  }());
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body ng-app='myApp' ng-controller="AppCtrl" class="container"&gt;
  
  &lt;div login&gt;&lt;/div&gt; //custom directive
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>