AngularJS & ui-router: How to dynamically add sub menu links

Question

I have an AngularJS site based on BlurAdmin: https://github.com/akveo/blur-admin that shows rooms. The list of available rooms is gotten via REST in a controller and I am looking for a way to inject the rooms as submenu links dynamically.

My rooms.module.js file, which has an static sub menu link "room", looks like:

(function () {
  'use strict'; 
  angular.module('BlurAdmin.pages.rooms', [])
      .config(routeConfig);

  /** @ngInject */
  function routeConfig($stateProvider) {
    $stateProvider
        .state('rooms', {
            controller: 'roomsCtrl',
            url: '/rooms',
            templateUrl: 'app/pages/rooms/rooms.html',
            title: 'Rooms'
        });
    // Static sub menu link
    $stateProvider.state('rooms.details', {
            url: '/room/:roomLink/',
            controller: 'roomCtrl',
            title: 'Room',
            templateUrl: 'app/pages/rooms/room/room.html'
        });


  };

})();

My roomsCtrl.js file looks like:

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.rooms').controller('roomsCtrl', roomsCtrl);

  /** @ngInject */
  function roomsCtrl($scope, $http, $timeout, $element, $state) { 

   // Here I'd like to process the REST response and create the submenu links.
   // Example of REST data
   var room = [{"name":"room 1", "id":"1"},{"name":"room 2", "id":"2"}]
   // Example of route
   var urlStr = "/rooms/room/1/"
  };



})();