How to compile template directives with ui-rout and AngularJS - angularjs

Question

I have the following state.
.state('categories', {
url: '/categories',
templateUrl: 'categories',
controller: 'CategoriesController',
})
And template url loads:
<div>
<a ui-sref="categories.bob">my link text</a>
</div>
But ui-sref isn't compiled. How is the right way to slove this case ?
--[EDIT]--
I mean html loaded form template is not compiled by AnulgarJS. For example
<a ui-sref="categories.bob">my link text</a>
should be
<a ui-sref="categories.bob" href="#/categories/bob">my link text</a>

Answer 1

I assume you want to pass bob as an optional parameter? If that is the case try the following:
Defining a new state:
.state('categories.name', {
url: '/:name',
templateUrl: 'subcategorytemplate',
controller: 'SubCategoryController',
})
The route:
<div>
<a ui-sref="categories.name({name:"bob"})">my link text</a>
</div>
You will find your route parameter in ui-router's $stateParams service by calling $stateParams.name. For further information look here.

Answer 2

In fact i found my problem. My nasted state url's was wrong.
.state('categories.category', {
url: '/:category',
templateUrl: function($params) {
console.log($params);
return 'categories/' + $params.category;
},
})
But I still don't understend how and why <a ui-sref="someUrl"> are rendered like <a ui-sref="someUrl" href="#>someUrl"> buy if I load html with templateUrl no href attribute is generated. So is there a way to make it generate href attribute too ?
How to load my nested view in parent ui-view ?