AngularJs re-size/adjust two div's accordingly

Question

I've two div covering whole page 50% each and on lower div click i want it to cover full screen and come back on click again example

JQuery equivalent

    $('.wrapper div.green').click(function() {
    $(this).toggleClass('go')
    if($(this).hasClass('go')){
      $(this).animate({'height':'100%'},{
          duration:200,
          step:function(gox){
              var height = gox < 100 ? (100 - gox) / 1 : 0;
              $(this).siblings().css('height', height + "%"); 
              }
          })
    }else{
        $('.wrapper div').animate({'height':'50.00%'},200)
    }
});

Now I want this in AngularJS and being new to it I've problems, so looking for some guidance to move in right direction. So far what I've tried

AngularJs Attempt

All i want is a similar functionality as of JQuery.

Answer 1

Here is a solution based on your first example - http://jsfiddle.net/nz2vunLs/2/

It uses CSS transistions and the angular directives ngClass and ngClick . I guess it's not the cleanest solution but it works.

html

<div ng-app ng-controller="Controller" class="wrapper">
    <div ng-class="{min: greenFullscreen}" class="blue animation"></div>
    <div ng-class="{max: greenFullscreen}" ng-click="toggleGreen()" class="green animation"></div>
</div>

Controller

function Controller($scope) {
    $scope.greenFullscreen = false;

    $scope.toggleGreen = function() {
        $scope.greenFullscreen = !$scope.greenFullscreen;
    }
}

Additional CSS

.green.max {
    height: 100%;
}

.blue.min {
    height: 0%;
}

.animation {
    -webkit-transition: height 200ms;  
    -moz-transition: height 200ms;  
    -o-transition: height 200ms;  
    transition: height 200ms;
}