I understand this has been asked and answered in multiple posts but I have attempted the solutions and still can't quite get there yet.
I have a few components that I'm routing between with ui-router and one is a contact form which, if a user enters data to and moves to another route then back to the contact form the state is reloaded and the form contents gone.
I saw another way of doing this by having a parent state and child states but couldn't recreate this in my code.
Maybe there's a simpler solution by using ui-router-extras with the sticky option although I attempted this and could't get it working either. I'll post the code as it works now.
(function () {
    angular.module('personalPortfolio')
        .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('about', {
                    sticky: true,
                    url: '/about',
                    template: '<pg-about></pg-about>'
                })
                .state('development', {
                    sticky: true,
                    url: '/work',
                    template: '<pg-dev></pg-dev>'
                })
                .state('contact', {
                    sticky: true,
                    url: '/contact',
                    template: '<pg-contact></pg-contact>'
                });
            $urlRouterProvider.otherwise('/about');
        }]);
})();
 
     
    