AngualrJS routeProvider routing to the wrong template

Question

I've the following 2 routes in my app.js file, for some reason I don't know when I try to navigate to /clients/new-invoice I see the /clients/:clientID route and template. The only way I can go to the correct page is to remove the /clients/:clientID route.

Also I have noticed that this started to happen only after I added the :clientID to the route below.

Can someone please help me by telling me what exactly I am doing wrong here?

    $routeProvider.when('/clients/:clientID', 
            {     templateUrl: 'templates/client-profile-view.html', 
                  controller: 'ClientsController',
                  title: 'Client Profile',
                  data: {
                     auth: true,
                     plevel: [5] 
                  }                
            });    


    $routeProvider.when('/clients/new-invoice', 
            {     templateUrl: 'templates/new-invoice.html', 
                  controller: 'InvoicesController',
                  title: 'New Invoice',
                  data: {
                     auth: true,
                     plevel: [5] 
                  }                
            });

Answer 1

You just have to change the order, place /clients/:clientID after /clients/new-invoice. Order matters. All regex paths should be defined after static paths.