Getting links using slug instead of id to be SEO f

Question

https://github.com/heshamelmasry77/javascript-angular-starter

I am integrating Prismic io CMS with angular js and i did it and its working properly with me but i am getting the links using id of each document which is not SEO friendly.I am trying to find a way to get the documents using there slug instead of the id but its very complicated i used a function in prismic io API call getByUID and i tried to get by slug but it is not working. In this repo i am posting here you will find the complete working project i integrated and also i am posting the code i tried to use getByUID from the API on it.

Clone my project and launch it to see what i am talking about. this is the link i am getting and what i want to make it SEO friendly :

http://127.0.0.1:52486/app/index.html#/document/WG90FCkAAMUrJCKv/tata

i want to generate something like that :

http://127.0.0.1:52486/app/index.html/document/whatever/tata

and also want to remove this #.

I red about the $locationProvider.html5Mode(true); but it block everything when integrate it i don't get links even when i used it.

 .controller('DocumentCtrl', ['$scope', '$routeParams', 'Prismic', '$location', function($scope, $routeParams, Prismic, $location) {
        Prismic.api('https://carzar.prismic.io', function(err, api){
            api.getByUID('Make', $routeParams.id).then(function(err, document){

                console.log(document);
                console.log(err);
            })
        })
        Prismic.api().then(function(api){
            api.getByUID('Make', $routeParams.slug).then(function(document){
                console.log(document);
            })
        })
        Prismic.api().then(function(api){
        api.getByUID('make', $routeParams.slug).then(function(document){

            $scope.document = document;
            console.log(document);

//          if (document.slug === $routeParams.slug) {
//              Prismic.ctx().then(function(ctx) {
//                    $scope.document = document;
//
//                    console.log(document);
//              })
//          }
//          else if (document.slugs.indexOf($routeParams.slug) >= 0) {
//              $location.path('/document/'+document.id+'/'+document.slug);
//          }
//          else {
//              // Should display some kind of error; will just redirect to / for now
//              $location.path('/');
//          }
        });
        });
    }])