Click-to-zoom on a div created with ng-repeat

I am currently building an Angular / Firebase app that allows a teacher to push a question to multiple students and then collect the students' responses on a single screen to be projected. (I don't have an active version, but the files are here on Github). Each student is given a small div that records their response, and the divs will automatically organize and resize. The actual data is in the participants object in Firebase, bound to the model as $ scope.participants:

participants: {
  Joe:  { response: "Joe answer"  },
  Sam:  { response: "Sam answer"  },
  Fred: { response: "Fred answer" }
}

      

        
        
        
      

    

... and the display section is a div container filled with ng-repeat, with a button that is called by a function to add (or remove) an "upscaled" class to the specific element whose button was clicked:

<div ng-repeat="(key, val) in participants" ng-class="{zoomed: zoomIndex==={{$index}} }">
  <span>{{key}}</span>
  <span>{{val.response}}</span>
  <button ng-click="zoom($index)">Click to zoom</button>
</div>

zoom = function(val) {
  if ($scope.zoomIndex !== val) {
    $scope.zoomIndex = val;
  } else {
    $scope.zoomIndex = 999;
  }
}

      

        
        
        
      

    

PROBLEM:

I can't get any sane zoom animation. The goal is for the selected div to be one of many to fill the window. I tried adding absolute positioning and expanding the z-index, but it jumps right away when it pops out of the ruler and jumps to the top left corner before slowly growing. I tried to leave him in place and just scare him to knock others off the road, but skip there too if he is not the first in his row ... he grows and pushes everything else off his line, and then when he is too big to fit it into the remaining space, it moves to the next line.

zoomed {
  height: 97%;
  width: 97%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; 
}

      

        
        
        
      

    

I thought about it sliding to the left as it grows, but I couldn't figure out how to get it to swap with the other divs and I thought about leaving it alone and creating a copy that is absolutely positioned right to the top a part that would then increase, but I could not wrap my brain around me. If possible, I would like to accomplish this with just Angular and CSS.

Any thoughts are welcome, including, "Your whole methodology is wrong, restructuring things." I only have six months of self-paced learning experience, so I'm almost certainly wrong.