Angular UI-Router use template based on passed value

I have a state in my Angular 1.3 app:

    .state('department.filetransfer', {
    url: '/filetransfer/:deptID',
    templateUrl: function($stateParams, $log) {
        return 'modules/department/templates/department.filetransfer.'+$stateParams.deptID+'.html';
    },
    controller: 'DeptFiletransferCtrl as ftc',
    data: {
        pageTitle: 'filetransfer',
        access: 'public'
    }
});

And then in my application I have a link such as

ui-sref="department.filetransfer.accounting"

But I get a console error

Error: Could not resolve 'department.filetransfer.accounting' from state 'department'

What did I miss?

There is a working example

The way how to pass param is via an object {paramName1:value1, paramName2: value2}:

ui-sref="department.filetransfer({deptID:accounting})"

The above example is suitable when accounting as a variable in $scope.

In case, that we need to pass string value, we should do it like this:

ui-sref="department.filetransfer({deptID:'accounting'})"

As documented here

ui-sref

A directive that binds a link (<a> tag) to a state. If the state has an associated URL, the directive will automatically generate & update the href attribute via the $state.href() method. Clicking the link will trigger a state transition with optional parameters.

Also middle-clicking, right-clicking, and ctrl-clicking on the link will be handled natively by the browser.

You can also use relative state paths within ui-sref, just like the relative paths passed to $state.go(). You just need to be aware that the path is relative to the state that the link lives in, in other words the state that loaded the template containing the link.

You can specify options to pass to $state.go() using the ui-sref-opts attribute. Options are restricted to location, inherit, and reload.