angularjs fullscreen homepage only

I am working on a website that has a fullscreen background only on the homepage. On other pages, they use normal bootstrap container. I used an additional view in order to pass the 100% height to its inner css. But this way, all other pages are forced to moved down, because the space above them are the 100% height. My question is how I do remove the 'style = height:100%' if I am not at homepage?

<body>
    <div ui-view="enterHome" style="height:100%;"></div> <!-- additional view -->

    <div ui-view="navbar"></div>
    <div ui-view="body"></div>
    <div ui-view="footer"></div>    
</body>

my app.js is like below: (ie, for state = enterHome, I only have the enterHome template displayed.)

.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
    .state('enterHome',{
        url:"/",            
        views:{
            "navbar":{
            },
            "carousel":{
            },
            "enterHome":{
                templateUrl:"templates/enterHome.body.html",
                controller: "EnterHomeBodyController"
            },
            "footer":{                  
            }               
        }
    })

Solution

Test that the current state is the homepage state:

<div ui-view="enterHome" style="{{ ('homepage' | isState) ? 'height:100%;' : '' }}></div>

Or, to be cleaner, define a full-height css class with height: 100%, and apply the class if the state is homepage:

<div ui-view="enterHome" ng-class="{ 'full-height' : ('homepage' | isState) }></div>