How to get window height in angular js

I 'm using iframe to display the contents using angularjs with ionic framework. Here, I need to give window height as iframe height, so I have used

  $scope.iframeHeight = window.innerHeight;

But, I am getting 1/4th screen only.

Here what I tried so far.


<!DOCTYPE html>
<html ng-app="ionicApp">
    <!-- ionic/angularjs CSS -->
    <link href="css/ionic.css" rel="stylesheet">
    <link href="css/ionic-custom.css" rel="stylesheet">
    <!-- ionic/angularjs js bundle -->
    <script type="text/javascript" src="js/ionic.bundle.js"></script>
    angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) { 
  $scope.iframeHeight = window.innerHeight;
    <body ng-controller="MainCtrl">
        <iframe src="" ng-style="{height:iFrameHeight}" id="iframeid" width="100%" ></iframe>   

Am I missing something?

Main problem: you need to add 'px' units to window.innerHeight number. And the second one, variable name is iframeHeight not iFrameHeight. Fixed expression will look like:

ng-style="{height: iframeHeight + 'px'}"


The window object, although globally available has testability issues as reference in the angular docs$window .It looks like its not an issue on your code though but for good practice, you can inject a $window service then reference that instead and of course the "px" issue on the bottom.

   angular.module('ionicApp', ['ionic']) 
    .controller('MainCtrl', function($scope, $window) { 
   $scope.iframeHeight = $window.innerHeight;

Later, as said before;

  ng-style="{height: iframeHeight + 'px'}"

Since AngularJS contains a small part of jQuery by itself you can use:

// Returns height of browser viewport
$scope.iframeHeight = $(window).height();


// Returns height of HTML document
$scope.iframeHeight = $(document).height();

Calculte windows height using angular

$scope.screenHeight = '';
$scope.calculateoriginalWidth = function() {
    var width = $window.innerWidth;
    $rootScope.originalWidth = width;
$scope.calculateScreenHeight = function() {
    var height = $window.innerHeight;
    var width = $window.innerWidth;
    var subheight = 0;
    var headerheight = document.getElementById('headerTitle1');
    var headerheight2 = document.getElementById('headerTitle2');
    if (headerheight) {
        subheight += headerheight.offsetHeight;
    if (headerheight2) {
        subheight += headerheight2.offsetHeight;

    $scope.screenHeight = height - subheight - 20;
    $rootScope.screenHeight = $scope.screenHeight;
    $scope.screenWidth = width;
    $rootScope.screenWidth = $scope.screenWidth;

var reg = $scope.$on('screenResize', function($evt, args) {

window.onresize = function(event) {
    $scope.$apply(function() {


You need to add the required dependencies in angular for using this code. Hope this will help you to calculate the height of the window.