angularjs - how to design a state with ui-router that replaces the content only of index.html with two files and two controllers -

how design state ui-router replaces content of index.html 2 files , 2 controllers. have views/dishdetail.html & views/comment.html , i`m trying this:

  .state('app.dishdetail',{         url: 'menu/:id',         views: {             'content@' : {                 'discomment': {                     templateurl : 'views/dishdetail.html',                     controller  : 'dishdetailcontroller'                     },                 'mycomment': {                     templateurl : 'views/comment.html',                     controller  : 'dishcommentcontroller'                     }             }         }      }); 

please help

this should way

    .state('app.dishdetail', {       url: 'menu/:id',       views: {         'content@': {             template: '<div ui-view="discomment" /></div>' +              '<div ui-view="mycomment" /></div>',           },           'discomment@app.dishdetail': {             templateurl: 'views/dishdetail.html',             controller: 'dishdetailcontroller'           },           'mycomment@app.dishdetail': {             templateurl: 'views/comment.html',             controller: 'dishcommentcontroller'           }       } 

there a working plunker