title: Angularjs routes optimize
body: <p>I have an accordion list in my Ionic application which looks like follows:</p>
  
  <p><a href="https://i.stack.imgur.com/L34F4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L34F4.png" alt="enter image description here"></a> </p>
  
  <p><strong>My routes are as follows:</strong></p>
  
  <pre><code>.state('tab.plan', {
        url: '/plan',
         resolve: {
          authenticated: ['djangoAuth', function(djangoAuth){
            return djangoAuth.authenticationStatus();
          }],
        },
        views: {
          'tab-plan': {
            templateUrl: '/templates/tab-plan.html', &lt;= view responsible for this list
            controller: 'planCtrl'
          }
        },
        cache: false
      })
  
    .state('tab.exerciseTest', {
        url: '/plan/2',          &lt;= hardcoding exerciseId as a trial, must be optimized 
         resolve: {
          authenticated: ['djangoAuth', function(djangoAuth){
            return djangoAuth.authenticationStatus();
          }],
        },
        views: {
          'tab-plan': {
            templateUrl: '/templates/template1.html',
            controller: 'template1Ctrl'
          }
        },
         cache: false
      })
  
      .state('tab.exercise', {
        url: '/plan/:exerciseId', 
         resolve: {
          authenticated: ['djangoAuth', function(djangoAuth){
            return djangoAuth.authenticationStatus();
          }],
        },
        views: {
          'tab-plan': {
            templateUrl: '/templates/video.html', &lt;= For physical exercises
            controller: 'videoCtrl'
          }
        },
         cache: false
      })
  </code></pre>
  
  <p>This list has total 12 elements (i.e. exercises) and when I click on any element it opens up the exercise page.</p>
  
  <p>However, these elements are of two types: exercise 1 (i.e.Best Stretch), 3, 5, 7, 9, 11, 12 are physical exercises and they have single HTML and a common logic (i.e. video.html, videoCtrl) and based on the exerciseId passed as a <code>stateParam</code> from the list to videoCtrl (i.e. 1,3,5,7,9,11,12), corresponding model values will be populated for different exercises. </p>
  
  <p>excerpt from the template of the accordion list:</p>
  
  <pre><code>&lt;a class="item item-icon-left item-accordion" ng-show="isGroupShown(day)" ng-repeat="exercise in day.exercises" type="item-text-wrap"
     href="#/tab/plan/{{exercise.id}}"&gt;
    {{exercise.name}}        
  &lt;/a&gt;
  </code></pre>
  
  <p>However, all other exercises (i.e. 2, 4, 6, 8, 10) are all memory games and they all have different logic and hence different HTMLs. </p>
  
  <p>Right now for example When I click on <strong>Simon game</strong> I handle the navigation to load a page as:</p>
  
  <pre><code>.state('tab.exerciseTest', {
            url: '/plan/2', //:dayId/:exerciseId
             resolve: {
              authenticated: ['djangoAuth', function(djangoAuth){
                return djangoAuth.authenticationStatus();
              }],
            },
            views: {
              'tab-plan': {
                templateUrl: '/templates/template1.html',
                controller: 'template1Ctrl'
              }
            },
             cache: false
          })
  </code></pre>
  
  <p>Here I am hardcoding the exerciseId value to 2 and then binding it to specific template and controller. This works, but the problem I will have is to manually do the same for all remaining memory games and it doesn't seem to be optimal. </p>
  
  <p><strong>How and where can I build a logic which will decide based on the exerciseId, which template and controller to use? Is it possible to implement something like this in routes?</strong></p>