How to add css dynmically?

Hello Sir,
I have used css. I have created check box dynamically. I have set multiple image on checked check box. Problem is that when i uncheck checkbox from the middle it is not merge between .
Here is my image…
image

I have used below data and css. How to merge if i unchecked checkbox from the middle of the position.there is not any gap in the middle. please help me to dynamically add css

 $scope.burgerItems = [

{id:1, title:'Buger 1',style:'position: absolute;left: 0px;bottom: -30px;width: 100px;height: 100px;', src:'img/burger/01.png'},
{id:2, title:'Buger 2',style:'position: absolute;left: 0px;bottom: -20px;width: 100px;height: 100px;', src:'img/burger/02-2.png'},
{id:3, title:'Buger 3',style:'position: absolute;left: 0px;bottom: -17px;width: 100px;height: 100px;', src:'img/burger/03.png'},
{id:4,title:'Buger 4', style:'position: absolute;left: 0px;bottom: -10px;width: 100px;height: 100px;', src:'img/burger/04.png'},
{id:5, title:'Buger 5',style:'position: absolute;left: 0px;bottom: -3px;width: 100px;height: 100px;', src:'img/burger/05.png'}

]

Here is my html code:
<-div ng-repeat=“item in itemshide” ng-show=“item.show”>
<-img src=“data:image/png;base64, {{item.img}}” style={{item.style}}>
<-/div>

Please help me