title: Dynamic URL name with Angularjs and Ui-Router
body: <p>I'm working with AngularJs and Ui-Router in my webapp. I've come to a point where I want to make it more dynamic. This is the situation I'm facing:</p>
  <ul>
  <li>I have a list of cities;</li>
  <li>Each city has a list with a lot of business;</li>
  </ul>
  <h3>What i want is:</h3>
  <p>When i select the city &quot;New York&quot;, for example, I'd like to set the <code>URL</code> to be: <code>mysite.com/#/new-york</code><br />
  And when i access one business whitin the NewYork city, I'd like it to be something like: <code>mysite.com/#/new-york/name-business</code></p>
  <p>Currently I'm only passing the city <code>Id</code> so I get it as an URL param and then I get the business list based on this ID param.</p>
  <p>This is the code I'm currently using:</p>
  <pre><code>//City
  .state('city', {
      url: &quot;/City&quot;,
      views: {
          &quot;main&quot;: {
              controller: 'CityCtrl',
              templateUrl: &quot;content/section/city/city.html&quot;
          }
      }
  })
  
  //Business
  .state('business', {
      url: &quot;/Business/:idparam&quot;,
      views: {
          &quot;main&quot;: {
              controller: 'BusinessCtrl',
              templateUrl: &quot;content/section/business/business.html&quot;
          }
      }
  })
  </code></pre>
  <p>Very simple. But instead of using the <code>URL</code> like <code>url: &quot;/Cities&quot;</code> I'd like it to be a dynamic url, based on the city name the user selects.</p>
  <p>Is it possible to do it with <code>ui-router</code>? Because i didn't found anything about this in the docs.</p>
  <p>If so, what should I do to achieve this result?</p>
  <h2>Edit:</h2>
  <p>I'm trying the solution on the answer by @Anid Monsur but the param value in the URL is <code>0</code> even tought it's a name. For example: <code>site.com/#/0</code> instead of <code>site.com/#/city-name</code></p>
  <p>This is what i did:</p>
  <pre><code>.state('city', {
      abstract: true,
      url: &quot;/:name&quot;,
      views: {
          &quot;main&quot;: {
              controller: 'CityCtrl',
              templateUrl: &quot;content/section/city/city.html&quot;
          }
      }
  })
  </code></pre>
  <p>And my link is:</p>
  <pre><code>ui-sref=&quot;city({name: {{city.nm_url}} })&quot;
  </code></pre>
  <p>Any ideas why the value is 0?</p>
  <h2>Edit2</h2>
  <p>Because i was passing a string value instead of int, i had to remove <code>{{ }}</code> from the link and it solved my issue = <code>ui-sref=&quot;city({name: city.nm_url })&quot;</code></p>