Where and how to inject $stateParams? - angularjs

Question

I am trying to get an image and a text into the view "home" in a Single Page Application with Angular ui-router and $stateParams.
'use strict';
angular.module('confusionApp')
.controller('IndexController', ['$scope', '$stateParams', 'menuFactory', 'corporateFactory', function($scope, $stateParams, menuFactory, corporateFactory) {
var dish = menuFactory.getDish(parseInt($stateParams.id,10));
$scope.dish = dish;
var promo = menuFactory.getPromotion(parseInt($stateParams.id,10));
$scope.promo = promo;
$scope.leader = corporateFactory.getLeader($stateParams.abbr)
}])
.controller('AboutController', ['$scope', 'corporateFactory', function($scope, corporateFactory) {
$scope.leaders = corporateFactory.getLeaders();
}])
The menuFactory service works fine in a 'MenuController' both with a list and with a parameter (injection while 'submit'). The corporateFactory works fine in a list using the 'AboutController'. But I just can't find out how to inject the $stateParam while index.html opens with the view 'home.html.
<div class="container" ng-controller="IndexController">
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h4>Implement the Featured Dish Here</h4>
<div class="media">
<div class="media-left media-middle">
<a>
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt={{dish.name}}>
</a>
</div>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
Would anybody help me, please?

Answer 1

don't use $stateParams
inject $state instead and then access
$state.params.wotever

Answer 2

Thanks for your precious help JB Nizet and danday74!
The problem was to let the template know the properties of which dish to show. The answers I found were in controllers.js. First, I had to correct an error, and then I created a $scope.property containing only the required dish:
var up = menuFactory.detDish(0);
$scope.up = up;
Then I could use {{up.image}}, {{up.name}} etc. in the template.