title: angularjs ui-router replace spaces with dashes
body: <p>I am trying to replace spaces with dashes in my route. I have followed this SO:</p>
  
  <p><a href="https://stackoverflow.com/questions/27918231/angular-ui-router-ui-sref-replace-url-characters-beautify">angular ui.router ui-sref replace url characters - beautify</a></p>
  
  <p>But I can't get it to work.
  My state looks like this:</p>
  
  <pre><code>function productRoute($stateProvider) {
  
      $stateProvider
          .state('home.category.picks.product', configureWhyRoute());
  
      function configureWhyRoute() {
          return {
              url: '/{ shortTitle: title }',
              views: {
                  '@home.category': {
                      templateUrl: 'app/wizard/product/product.html',
                      controller: 'ProductController',
                      controllerAs: 'controller'
                  },
                  'menu@': {
                      templateUrl: 'app/core/menu/sub-menu.html',
                      controller: 'MenuController',
                      controllerAs: 'controller'
                  }
              },
              resolve: {
                  product: ['$stateParams', 'products', function ($stateParams, products) {
                      return products.find(function (product) {
                          return product.shortTitle === $stateParams.shortTitle;
                      });
                  }]
              },
              data: {
                  pageTitle: 'Product description',
                  hideFooter: true
              }
          };
      };
  };
  </code></pre>
  
  <p>I have then set up my <strong>$$urlMatcherFactoryProvider.type</strong> like this:</p>
  
  <pre><code>function config($locationProvider, $httpProvider, $urlMatcherFactoryProvider, cfpLoadingBarProvider) {
      /*** removed for brevity ***/
      $urlMatcherFactoryProvider.type('title', {
          encode: function (str) { return str &amp;&amp; str.replace(/ /g, "-"); },
          decode: function (str) { return str &amp;&amp; str.replace(/-/g, " "); },
          is: angular.isString,
          pattern: /[^/]+/
      });
  };
  </code></pre>
  
  <p>In my view, I reference the state like this:</p>
  
  <pre><code>ui-sref="home.category.picks.product({ shortTitle: product.shortTitle })"
  </code></pre>
  
  <p>But it isn't working. When I click the link, it takes me to this url:</p>
  
  <blockquote>
    <p>/cameras/picks/%7B%20shortTitle:%20title%20%7D</p>
  </blockquote>
  
  <p>Which isn't right at all.
  Does anyone know what I am doing wrong?</p>