ui-sref not changing template because of state behaving like a child state

Question

I am using ui-sref and trying to change the state in the main.js file. The url changes to the corresponding state but template doesn't. What actually I am trying to do is to change the state in main.js file which uses a template having ui-view from another home.js file. ui-view runs correctly in case of my "main" state but it fails in case of "create-patient" state and returns the template from the "main" state.

Here are my code snippets :

<a ui-sref="createPatient"> * Click here to create a Patient Record * </a>

main.js

.config(($stateProvider, $urlRouterProvider) => {
"ngInject";
$urlRouterProvider.otherwise('/');

$stateProvider.state('main', {
  url: '/',
  template: require('./main.html')
});

$stateProvider.state('createPatient', {
  url: '/create-patient',
  template: require('./mainCreatePatient.html')
})

})

main.html

<div>
  <header-component></header-component>
</div><br/>
<div>
  <breadcrumbs-component></breadcrumbs-component>
</div>

<div class="clear"></div>

<div class="home" id="body-wrapper" ui-view="homePage">
</div>

mainCreatePatient.html

<div>
  <header-component></header-component>
</div><br/>


<div class="clear"></div>

<div class="home" id="body-wrapper" ui-view="patientCreate">
</div>

home.js

.config(($stateProvider, $urlRouterProvider) => {
    "ngInject";
    $urlRouterProvider.otherwise('/');

    $stateProvider.state('home', {
      url: '/',
      views : {
        "homePage@" : {
          template: require('./home.html')
        },
        "patientCreate@" : {
          template : require('./patientCreatePage.html')
        }
      }
    });
})

I am just stuck at this and don't know whether there might be any better way to do this or not. Any help will be appreciable. Thanks in advance !!