[AngularJS] Asigning the href (i.e., route name and route param name) in template based on the value from scope

I'm new to AngularJs and still learning the things, I'm creating a menu with items that are clickable. When someone clicks on the item it will redirect to a view using the route name provided in the href, the catch here is that my menu will be generates out of the scope from the controller using the ng-repeat. I want to change my href value based on the item value, so that the corresponding view will be loaded based on route, here is my mark up and the controller that populates the scope. Can someone help me what is the best way to do this.

My href values (which points to the route) here in the below code '#Categories', should be changing based on the c.name. Example: ifc.name is 'ABC' i should route the user to 'root1/ABC/:123' else ifc.name is 'DEF' i should route the user to 'root2/DEF'

Any help on this is highly appreciated.

<a data-ng-repeat="c in vm.List | orderBy: 'order'" href="#Categories/{{c.category}}/{{c.name}}" data-ng-show="c.count >0">


function getHomeConfigsCtrl($http, iService, $routeParams) {
    var vm = this;
    vm.List = [];
    var promise =
        iService.getConfig(ID);
    promise.then(
       function (result) {
           angular.forEach(result.data.menu, function (value, key) {
               vm.List.push(value);
           });
       },
       function (errorPayload) {
           $log.error('failure loading home page config', errorPayload);
       });
};