Angular route causing an infinite loop

I have a an angular single page app that loads correctly on for the home and about pages. But the edit route goes into an infinite loop of errors.

The error is

SyntaxError: Unexpected token '<'

I call editCaldera() using a button in a table using ng-click

<table class="table">
  <thead>
    <tr>
      <th scope="col">id</th>
      <th scope="col">Borrower1</th>
      <th scope="col">Email</th>
      <th scope="col">Address</th>
      <th scope="col">ContactNumber</th>
      <th scope="col">Lender</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="caldera in calderas">
      <td>{{ caldera._id }}</td>
      <td>{{ caldera.Borrower1 }}</td>
      <td>{{ caldera.Email }}</td>
      <td>{{ caldera.Address }}</td>
      <td>{{ caldera.ContactNumber }}</td>
      <td>{{ caldera.Lender }}</td>
      <td><button ng-click="editCaldera(caldera._id)">Edit</button></td>
      <td><button ng-click="deleteCaldera(caldera._id)">Delete</button></td>
    </tr>
  </tbody>
</table>

Below is my main javascript file.

var calderaApp = angular.module('calderaApp', ['ngRoute']);

calderaApp.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider

    // route for the home page
    .when('/', {
      templateUrl: 'pages/home.html',
      controller: 'mainController'
    })

    // route for the about page
    .when('/about', {
      templateUrl: 'pages/about.html',
      controller: 'aboutController'
    })
    .when('/edit/:id', {
      templateUrl: 'pages/edit.html',
      controller: 'editController'
    })
});



calderaApp.controller('mainController', function($scope, $http, $location) {

  // when landing on the page, get all todos and show them
  $http.get('/findall')
    .success(function(data) {
      console.log(data);
      $scope.calderas = data;

    })
    .error(function(data) {
      console.log('Error: ' + data);
    });

  // when submitting the add form, send the text to the node API
  $scope.editCaldera = function(id) {
    console.log('editCaldera function')
    var earl = '/edit/' + id;
    $location.url(earl);
  };
});

calderaApp.controller('aboutController', function($scope, $http) {
  $scope.message = 'Look! I am an about page.';
});

calderaApp.controller('editController', function($scope, $http, $routeParams) {
  console.log('edit')
});

I need the id field to then make an API call but even before making this call and just with a very basic controller a loop occurs.