$routeProvider - modal of a single page with different URL - angularjs

Question

I have a list of items showed in a page. The idea is to click on an item, and open a modal showing the information of the selected item, and in the background the list remains.
When the modal opens, the URL should change. So the idea would be to have a specific URL for every item, so when you access the url, you should see the modal, with the item info and in the background the main page.
I'm using $routeProvider for routing.
Example:
I would like to have something similar to this
http://www.eltrecetv.com.ar/articulo/le-salio-del-alma-el-emotivo-recuerdo-de-la-china-suarez-para-su-papa-en-una-fecha_087466
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/meals', {
templateUrl: 'views/meals/meals.html',
controller: 'MealsCtrl'
})
.when('/meal/:mealId', {
templateUrl: 'views/meals/meal-profile.html',
controller: 'MealCtrl'
})
The /meal/:mealId should be shown in a modal, and the URL should change when the modal is opened.
I've searched a lot, but I couldn't find a suitable answer for this.
Thanks for the help!!

Answer 1

You can specify states you want to show as modal and when it is handled, return to state you want to. For example:-
app.config(function ($stateProvider) {
$stateProvider.state('tasks', {
url: '/tasks',
templateUrl: 'tasks.html',
controller: 'TasksCtrl'
url: "/tasks/:id",
onEnter: function($stateParams, $state, $modal) {
$modal.open({
templateUrl: "show.html",
resolve: {},
controller: function($scope, $state) {
$scope.ok = function () {
$scope.$close();
};
$scope.dismiss = function () {
$scope.$dismiss();
};
}
}).result.then(function (result) {
// $scope.$close
}, function (result) {
// $scope.$dismiss
}).finally(function () {
// finally
return $state.transitionTo("tasks");
});
}
});
});
Here is plunker code for it : code
I will edit my answer for routeProvider also.