Angular view is not loading but controller is

Question

I have routes defined for a couple of views in Angular, one is the default 'Tickets' and the other is an edit view 'Ticket'. For some reason when I code the 'Edit' as a url the Ticket route opens fine. If I code the 'Edit' link using ng-click to run a method on the controller and change the location (ie. $location.path('/ticket/2')), it loads the correct controller 'TicketController' but never seems to load the view. In fact is loads the correct controller and then the default controller after that.

In the following Plunker you'll see two edit links for each detail item, 'Edit' is the url with an href set (works fine), the other 'Edit 2' is using the ng-click directive.

http://plnkr.co/edit/aY7fSvVJCIaVYnCHXcq6?p=preview

(function () {
    var app = angular.module('SimpleTicket', ['ngRoute']);

    app.config(function ($httpProvider, $routeProvider) {
        $routeProvider.
            when('/ticket/:ticketId',
                {
                    templateUrl: 'ticket.html',
                    controller: 'TicketController as vm'
                }).
            when('/', {
                templateUrl: 'tickets.html',
                controller: 'TicketsController as vm'
            }).
            otherwise({
                redirectTo: '/'
            });

    });

    var TicketController = function ($scope, $log, $routeParams, $location) {
        var vm = this;
        $log.log('TicketController');
        var saveTicket = function () {
          $log.log('Item saved')
          $location.path('/');
        };

        vm.saveTicket = saveTicket;

        vm.ticket = {TicketId:2,Title:'Ticket 2',Body:'Body 2'};

    };
    app.controller("TicketController", TicketController);

    var TicketsController = function ($location, $log) {
        var vm = this;
        $log.log('TicketsController');

        var editTicket = function () {
            $log.log('editTicket');
            $location.path('/ticket/2');
        };
        vm.editTicket = editTicket;

        vm.tickets = [{TicketId:1,Title:'Ticket 1',Body:'Body 1'},
            {TicketId:2,Title:'Ticket 2',Body:'Body 2'}];

    };

    app.controller("TicketsController", TicketsController);



}());

Answer 1

Just remove href="#" to href="" from tickets.html

Working Plunkr

Answer 2

In the index.html you have to fix the extra double quote in ng-app as @brygiger said.

Also in tickets.html you have the extra # in href, it isn't needed as you can see here: https://docs.angularjs.org/api/ng/directive/ngHref

<a ng-href="ticket/{{ticket.TicketId}}">edit</a> | 
<a href="" ng-click="vm.editTicket()">edit 2</a>
http://plnkr.co/edit/AuFnB7dV1YOkTuQiqxvg

See the plunker for the fixed version