cannot fix a div over a swipable image angular

i have something like this codepen.io/ionic/pen/nxEdH and there is also if you watch more two div box where it's wrote "yes" and "nope" (on swiping), but it doesn't show this. and if i try to show it they aren't fixed in the page but fixed over every image so if i swipe right, the text swipe right, but it hasn't to swipe with the card it has to stay there over it without moving only appearing and disappearing. Like here: codepen.io/developingidea/pen/meAIn

So at the and i'd like to use the second link "text animation" in the first link "swipe card". All in angularjs.

Here is what i've done: (wrong) controller:

                .controller('CardCtrl', function($scope, TDCardDelegate) {

                $scope.opacitySi = 0;
                $scope.opacityNo = 0;


                $scope.cardSwipedLeft = function(index) {
                console.log('Non mi Piace');
                    $scope.opacityNo = 1;
                    $scope.opacitySi = 0;
                $scope.addCard();
              };

              $scope.cardSwipedRight = function(index) {
                console.log('Mi Piace');
                  $scope.opacityNo = 0;
                    $scope.opacitySi = 1;
                $scope.addCard();
              };
            })

html

                <ion-pane ng-controller="CardsCtrl">
                  <td-cards>
                    <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
                      <div class="image">
                        <div class="yes-text" ng-style="{'opacity': opacitySi}">YEP</div>
                        <img ng-src="{{card.image}}">
                        <div class="no-text" ng-style="{'opacity': opacityNo}">NOPE</div>
                      </div>
                    </td-card>
                  </td-cards>
                </ion-pane>

css

                .yes-text {
                left:80%;
                width:10%;
                height:10%;
                bottom:20%;
                background:green;
                position:fixed;
                text-align:center;
                -webkit-border-radius: 150px;
                -moz-border-radius: 150px;
                border-radius: 150px;
                z-index: 999;
            }
            .no-text {
                right:80%;
                width:10%;
                height:10%;
                bottom:20%;
                background:red;
                position:fixed;
                text-align:center;
                -webkit-border-radius: 150px;
                -moz-border-radius: 150px;
                border-radius: 150px;
                z-index: 999;
            }

Thank you

EDIT: Also tried this way:

controller

                .controller('CardCtrl', function($scope, TDCardDelegate) {


                $scope.cardSwipedLeft = function(index) {
                console.log('NOPE');
                $scope.like = false;
                $scope.dislike = true;
                $scope.addCard();
              };

              $scope.cardSwipedRight = function(index) {
                console.log('YEP');
                $scope.like = false;
                $scope.dislike = true;
                $scope.addCard();
              };
            })

html

<td-cards>
    <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
      <div class="image">      
        <div ng-class="{true: 'like', false: 'inactive'}[like]">YEP</div>
            <img ng-src="{{card.image}}">
        <div ng-class="{true: 'dislike', false: 'inactive'}[dislike]">NOPE</div>
      </div>
    </td-card>
  </td-cards>