How can I change URL from $scope in AngularJS?

Question

I have made access navigation with $scope and I used them based on click and I did. I can't set URL in variable accommodate. The correct URL is http://www.example.com/base/index or http://www.example.com/base/thread, or http://www.example.com/base/tag. But the result is always `http://www.example.com/base/index even thought , I clicked another navigation.

After I search my problem, the answer is make $routeProvider and $location. Can I use $scope and setting URL inside $scope?

This is my code:

$scope.states = {};
$scope.states.activeItem = 'nav1';

    $scope.items = [{
        id: 'nav1',
        target: 'home',
        title: 'Home',
        icon: 'fa fa-home fa-3x'
    }, {
        id: 'nav2',
        target: 'thread',
        title: 'Thread + Answer',
        icon: 'fa fa-briefcase fa-3x'
    }, {
        id: 'nav3',
        target: 'tag',
        title: 'Tag',
        icon: 'fa fa-briefcase fa-3x'
    },
    {
        id: 'nav4',
        target: 'trending_tag',
        title: 'Trending Tag',
        icon: 'fa fa-briefcase fa-3x'
    },
    {
        id: 'nav5',
        target: 'category',
        title: 'Category',
        icon: 'fa fa-briefcase fa-3x'
    },
    {
        id: 'nav6',
        target: 'user',
        title: 'User',
        icon: 'fa fa-user-circle-o fa-3x'
    }];

    $scope.callToAction = function(actionName){

        if($scope[actionName]){
            $scope[actionName]();
        }else{
            alert("YOUR PAGE NOT FOUND BECAUSE AKU BELUM BUAT PAGE NYA HEHE");
        }
    };

By the way, $scope.items to execute my navigation.

Answer 1

You can change the URL of your page by using $location.url.

$location.url('/yourUrl') will go to /yourUrl. You can pass a String as a variable to the function.

Note that you can also access to the current URL with:

$scope.currentUrl = $location.url(); // <-- No params

---

Don't forget to inject $location in your service/controller!

Answer 2

You can use $routeProvider for navigation.

angular.module('FunnyAnt.Examples.Routing')
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});

working fiddle here