AngularJS Tree directive & ui-router change url & dynamic content on tree node click

I have make a simply tree directive by angularJS, here is the plunker link:

http://plnkr.co/edit/6f0vABqkNT3l8lTVR0yd?p=preview

some of the codes:

** Inside the directive, my hg-repeat template like:

........
template =  '<li ng-repeat="node in treeData">' +
                '<a ng-click="tree.nodeOnClick(node, $event)" 
                    ui-sref="book.list({id:node.id})">{{node.name}}</a>' +
                '<tree tree-data="node.children"></tree>' +
            '</li>'

** My Questions **

1st URL change

If the node has clicked, for example, 'programming node', the current url will display: book/:typeid;

If the book category (no id) has clicked, I want the url change to book/:typeid/category-name, further more,

If the book has clicked, I want the url change to book/:typeid/category-name/:bookId

I can easily do this by manually use book > book.type > book.type.cat > book.type.cat.detail in my $sateProvider, but how could I do it within hg-repeat (in case if I'm not able to restrict my data)?

2nd Dynamic content

Once the node clicked, I want the ui-view will load different content/template by different id, but could I use only one ui-view container, if i could, how could I achieve that? Or should I specific the ui-view? like: ui-view="book", ui-view="category";

But the category node doesn't have id, how could the content recognise this category node is under one of the book type?

(could do this by adding anther directive on tag, then set attrs of tag on tree data binding, once the node has clicked, it will run thought the attrs check before content load, but will this more complicated than it should? )

Hope I do clearly describe my problem.