ui-sref not generating the href - angularjs

Question

I'm not sure what is the mistake I'm doing here but the href is not generating. I have configured as per ui-router example but when I put the ui-sref in the ng-repeat its not generating the URL and also when I type the URL manually also its not working.
Even when I tied to set the value like data-ng-click="widget.open({widgetId: 1}) nothing happens.
Here is my code snippet.
Config:
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
templateUrl: '/templates/home/home.html'
})
.state('widget', {
// With abstract set to true, that means this state can not be explicitly activated.
// It can only be implicitly activated by activating one of its children.
abstract: true,
// This abstract state will prepend '/widgets' onto the urls of all its children.
url: '/widget',
// Loading a template from a file. This is also a top level state,
// so this template file will be loaded and then inserted into the ui-view
// within index.html.
templateUrl: '/templates/widgets/index.html'
})
.state('widget.open', {
url: '/{widgetId:[\w+$]}', //matches [a-zA-Z_0-9]
templateUrl: '/templates/widgets/index.html'
})
.state('widget.create', {
url: '/{type:[a-zA-Z]}', // We can test enum list also
templateUrl: '/templates/widgets/index.html'
})
.state('mashup', {
// With abstract set to true, that means this state can not be explicitly activated.
// It can only be implicitly activated by activating one of its children.
abstract: true,
// This abstract state will prepend '/mashups' onto the urls of all its children.
url: '/mashup',
// Loading a template from a file. This is also a top level state,
// so this template file will be loaded and then inserted into the ui-view
// within index.html.
templateUrl: '/templates/mashups/index.html'
})
.state('mashup.open', {
url: '/{mashupId:[\w+$]}', //matches [a-zA-Z_0-9]
templateUrl: '/templates/mashups/index.html'
})
.state('mashup.create', {
url: '/{templateType:[a-zA-Z]}', // We can test enum list also
templateUrl: '/templates/mashups/index.html'
});
}])
Template:
<div class="panel panel-default widget-list">
<div class="panel-heading">
<h3 class="panel-title">My Widgets ({{widgets.length}})</h3>
</div>
<div class="panel-body hp-content">
<table class="table table-condensed table-bordered">
<tbody>
<tr data-ng-repeat="w in widgets">
<td class="hp-type">Icon</td>
<td>
<div class="row">
<div class="col-xs-12">
<a data-ui-sref="widget.open({widgetId: w.id })">{{::w.name}}</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
{{::w.sourceId}}
</div>
<div class="col-xs-12 col-md-6">
{{::w.communityId}}
</div>
</div>
</td>
<td class="hp-actions">{{::w.access}}</td>
</tr>
</tbody>
</table>
</div>
<div class="panel-footer">Panel footer</div>
</div>
Could someone please point the mistake what I'm doing?
Thanks

Answer 1

There is no need to wrap the widget.id in curly braces:
data-ui-sref="widget.open({widgetId: {{widget.id}} })
Use:
data-ui-sref="widget.open({widgetId: widget.id })">

Answer 2

I think your problem is a naming issue. You are in a repeater that is widget in widgets, so when you do widget.open, I think its looking for a open function in the the widget object of the repeater and not the sub route 'widget.open'.