Q:

AngularJS: Append to url the page number while paginating

I am working on a application where i am paginating through some records by making calls to the server like random/api/endpoint?page=1/2/3
Now i while i paginate, 
i need to append the page i am requesting to the url like http://www.paginate.com/somedata/{1/2/3} and on opening this url it should also fetch that specific page in the view {meaning if i navigate to hhtp://www.paginate.com/somedata/4 then the app/view should reflect data from the api call random/api/endpoint?page=4}. 
Presently i am using angular-route 1.4.12 with the same version of AngularJS. Very new to angular (2 days), any help will be greatly appreciated.
EDIT : What i want to do ?
When i click next while paginating, it should append the pageNumber to the url.
route.js
angular
    .module('mainRouter', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('/somedata/:page', {
                templateUrl: 'partials/somedata.html',
                controller: 'PaginationCtrl',
                controllerAs: 'vm',
                reloadOnSearch: false
            }).
            otherwise( { redirectTo: "/somedata/1" });
        }
    ]);

PaginationCtrl.js
angular
        .module('controllers.Pagination', [])
        .controller('PaginationCtrl', PaginationCtrl);

    PaginationCtrl.$inject = ['$routeParams', 'paginationService'];

    function PaginationCtrl ($routeParams, paginationService) {
        var vm = this;
        vm.paginationData = {
            perPage: 10,
            currentPage: 1
        };

        vm.isLoading = false;
        vm.paginate = paginate;

        paginate(vm.paginationData.currentPage);
        calculateTotalPages();

        function calculateTotalPages () {
            paginationService.findAll(0, 0)
              .success(function (res) {
                  var paginationData = vm.paginationData || {};
                  paginationData.totalPages = Math.ceil(res.count / paginationData.perPage);
              })
              .error(function (res) {
                  console.log('Error trying to get the total number of pages', res);
              });
        }

        function paginate (pageNumber, perPage) {
            vm.isLoading = true;
            var paginationData = vm.paginationData || {};
            if (! perPage) {
                perPage = paginationData.perPage;
            }
            console.log($routeParams);
            paginationService.findAll(perPage, pageNumber)
              .success(function (res) {
                  paginationData.items = res.documents;
                  vm.isLoading = false;
              })
              .error(function (res) {
                  console.log('Error fetching more Logs', res);
              });
        }
    }

PaginationService.js
angular
        .module('services.Pagination', [])
        .service('paginationService', PaginationService);

    PaginationService.$inject = ['$http', 'Constants'];

    function PaginationService ($http, Constants) {
        // console.log($http);
        this.findAll = function (perPage, page) {
            var url = Constants.baseUrl + '/sms/get/data';
            if (page > 0) {
                url += '?page=' + page;
            }
            return $http.get(url);
        };
    }

directive being used
var app = angular.module('directives.Pagination', []);

    app.directive('pagination', [function () {
        return {
            restrict: 'E',
            template: '<div class="ui pagination menu"> \
                <a class="icon item" ng-click="vm.previous()"><i class="left arrow icon"></i></a> \
                <div class="icon item">{{ vm.paginationData.currentPage }} / {{ vm.paginationData.totalPages }}</div> \
                <a class="icon item" ng-click="vm.next()"><i class="right arrow icon"></i></a> \
                </div>',
            scope: '=',
            link: function (scope, element, attrs) {
                var vm = scope.vm;
                vm.paginationData.currentPage = 1;
                vm.next = function () {
                    vm.paginationData.currentPage++;
                    if (vm.paginationData.currentPage > vm.paginationData.totalPages) {
                        vm.paginationData.currentPage = vm.paginationData.totalPages;
                    }
                    vm.paginate(vm.paginationData.currentPage);
                };

                vm.previous = function () {
                    vm.paginationData.currentPage--;
                    if (vm.paginationData.currentPage < 1) {
                        vm.paginationData.currentPage = 1;
                    }
                    vm.paginate(vm.paginationData.currentPage);
                };
            }
        };
    }]);

A:

You should be able to access your :page parameter via $routeParams, which you've already injected in your controller.
Just call paginate with $routeParams.page instead of your default of 1.
In order to update the url as you go (in such a way that allows the user to copy the url for later use), without updating the route and re-initializing the controller, you can just call $location.search({page: page}). When this is called with reloadOnSearch set to false (as you've already done) it shouldn't re-initalize the controller.
Lastly, in case its not clear, you'll have to update the URL at the same time you make your API call. There isn't a built in angular way to do this, but it should be pretty straightforward.

