Angular.js UI-Router templates are not loading

you are using for contact home and about always same module 'homeModel'

angular.module('homeModel', []) 

the contact ist the last one and overwrites it

  <script src="home.component.js"></script>
    <script src="about.component.js"></script>
    <script src="contact.component.js"></script>

so use unique module for every component

also make sure you add it in your script for example

 angular.module('myVin', ['ui.router', 'homeModel', 'contactModel', 'aboutModel'])

also remove backslash to get about.html

templateUrl: '/about.html',

You should be using templateUrl property as below code.

Your contact page was working because it is defined as a component

// Code goes here

(function() {
    'use strict';

    angular.module('myVin', ['ui.router', 'homeModel'])
        .config(function($stateProvider,  $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: 'home.html'
                })
                .state('about', {
                    url: '/about',
                    templateUrl: 'about.html'
                })
                .state('contact', {
                    url: '/contact',
                    template: '<contact></contact>'
                });
        });
})();

Updated PLUNK

In the script.js , you are using 'template' and wrote '<home></home>', but you have home.html. and you want to use home.html as a template. You should use templateUrl: 'home.html' instead template:'<home></home>'

Also change your code for template: <about></about> & template: <contact></contact>

(function() {
    'use strict';

    angular.module('myVin', ['ui.router', 'homeModel'])
        .config(function($stateProvider,  $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    template: '<home></home>'
                })
                .state('about', {
                    url: '/about',
                    template: '<about></about>'
                })
                .state('contact', {
                    url: '/contact',
                    template: '<contact></contact>'
                });
        });
})();

see in the snapshot, please do change in red box in your code :

use this code in script.js and run again your code will run successfully:

(function() {
    'use strict';

    angular.module('myVin', ['ui.router', 'homeModel'])
        .config(function($stateProvider,  $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: 'home.html'
                })
                .state('about', {
                    url: '/about',
                    templateUrl: 'about.html'
                })
                .state('contact', {
                    url: '/contact',
                    templateUrl: 'contact.html'
                });
        });
})();

See the snapshot after changing the code:

@Arjun: Your code is also correct, add some html in your template ( Like, i have done, i wrote template: '<h1>Shubham Verma</h1>' )

(function() { 'use strict';

    angular.module('myVin', ['ui.router', 'homeModel'])
        .config(function($stateProvider,  $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $stateProvider
                .state('home', {
                    url: '/',
                    template: '<h1>Shubham Verma</h1>'
                })
                .state('about', {
                    url: '/about',
                    templateUrl: 'about.html'
                })
                .state('contact', {
                    url: '/contact',
                    templateUrl: 'contact.html'
                });
        });
})();

Please see the snapshot: