UI-роутер AngulaJS: маршрутизация до состояния URL

Я пытаюсь написать действительно маленькое приложение, что все, что он делает, получает данные из внешней службы, внешняя служба принимает путь и возвращает файлы и каталоги в этом пути, думает об этом как о файловом браузере. Все работает нормально при использовании ngRoute но я пытаюсь перейти на ui.router так как мне нужно обновить несколько разделов страницы. Проблема возникает из-за того, что мои пути не работают, поскольку я всегда перенаправлен на base состояние, я предполагаю из-за $urlRouterProvider.otherwise('/');

Я чрезвычайно новичок в javascript и AngularJS, и я потратил немало дней, пытаясь найти решение этой проблемы без большой удачи, вся документация, которую я вижу, всегда использует статический url like /demo/{id}/{info} где мой url является динамическим /repos/{path} где путь - это фактически путь, как /tmp/test/test1/test2

Это текущий код

var app = angular.module("atlas", ['ui.router', 'repoControllers']);

app.config(['$stateProvider', '$urlRouterProvider',
  function ($stateProvider, $urlRouterProvider){

    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('base', {
        url: '/',
        views: {
          '': { templateUrl: 'partials/repo-list.html' },
          'repoinfo': { templateUrl: 'partials/repo-info.html' },
          'repoownership': { templateUrl: 'partials/group-ownership.html' },
          'repotype': { templateUrl: 'partials/repo-type.html' },
          'repopath': { templateUrl: 'partials/repo-path.html' },
          'userinfo': { templateUrl: 'partials/user-info.html' }
        },
        controller: 'RepoController'
      })
    .state('base.repos', {
        url: '/repos/*path',
        parent: 'base',
        views: {
          '': { templateUrl: 'partials/repo-list.html' },
          'repoinfo': { templateUrl: 'partials/repo-info.html' },
          'repoownership': { templateUrl: 'partials/group-ownership.html' },
          'repotype': { templateUrl: 'partials/repo-type.html' },
          'repopath': { templateUrl: 'partials/repo-path.html' },
          'userinfo': { templateUrl: 'partials/user-info.html' }
        },
        controller: 'RepoListCtrl'
      })
  }]);

app.factory('atlasRepository', function($http) {
    return {
      getIndex: function(path) {
        console.log("FACTORY: getIndex " + path);
        var sanitized = "";
        if (typeof path === 'undefined') {
          sanitized = '/';
        } else {
          sanitized = "/" + path.replace(/\/+/g, '/');
        };

        var url = "http://localhost:8080" + sanitized;
        console.log(url);
        return $http.get(url);
      }
    };
  });

app.controller("RepoController", function($scope, $stateParams, atlasRepository) {
    $scope.repos = atlasRepository.getIndex($stateParams.path).success(function(repos) {
        $scope.repos = repos;
        console.log("RepoController");
      });

  });


var repoControllers = angular.module('repoControllers', []);

repoControllers.controller("RepoListCtrl", function($scope, $stateParams, atlasRepository) {
    $scope.repos = atlasRepository.getIndex($stateParams.path).success(function(repos) {
        $scope.repos = repos;
        console.log($stateParams);
        console.log($scope);
      });

  });
app.filter('bytes', function() {
    return function(bytes, precision) {
      if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-';
      if (typeof precision === 'undefined') precision = 1;
      var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'],
      number = Math.floor(Math.log(bytes) / Math.log(1024));
      return (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision) +  ' ' + units[number];
    }
  });

app.filter('path', function() {
    return function(path) {
      path = path.replace(/^\//, '');
      return path;
    }
  });

и частичное представление таблицы, в которой перечислены файлы/каталоги

 <table>
    <tr>
      <th>File Name</th>
      <th>Size</th>
      <th>Modified Date</th>
      <th>User</th>
      <th>Action</th>
    </tr>
    <tr ng-repeat="directory in repos.directories">
      <td><a href="#/repos/{{repos.path| path}}{{directory.name}}/"><i class="fa fa-folder"></i> {{directory.name}}</a></td>
      <td>-</td>
      <td> {{directory.updatedat | date:"medium"}}</td>
      <td>unknown</td>
      <td><i class="fa fa-trash"></i></td>
    </tr>

    <tr ng-repeat="file in repos.files">
      <td><i class="fa fa-file"></i> {{file.name}}</td>
      <td> {{file.size | bytes}}</td>
      <td> {{file.updatedat| date:"medium"}}</td>
      <td>unknown</td>
      <td><i class="fa fa-trash"></i></td>
    </tr>
  </table>

Я пробовал использовать ui-sref в шаблоне, но еще раз все документы указывают на довольно простые варианты использования <a ui-sref="contacts.detail({ id: contact.id })">{{ contact.name }}</a> который в моем случае не работает, потому что мне нужно передать текущий путь плюс имя каталога, чтобы изменить его. Я пробовал <a ui-sref="contacts.detail({ id: repos.path + directory.name })">{{ directory.name }}</a> без особых проблем, особенно после того, как файл repos.path нужно отфильтровать