Как показать скрытое содержание предложения с кликом в angularjs

У меня есть html-код ниже,

<div class="item item-stacked-label" ng-repeat="item in cartItems" >
  <div class="row">
    <div class="col" ng-model="item.name" style="max-width:50%;" ng-class="{'p': active,'showName': !active}" ng-click="active = !active" ><p >{{item.name}}</p></div>
    <div class="col" ng-model="item.qty" >{{item.qty}}</div>
    <div class="col" ng-model="item.price" >{{item.price}}</div>
  </div>
</div>

Ниже приведена css,

.showName {
max-width: 100%;
}
p{
    color:#666;
    text-align:center;
 max-width: 50%;
}

Я хочу показать полную информацию щелчком. Я пробовал вышеуказанный код, но он не работает для меня, как я ожидал.

Ниже я получаю результат. Но я хочу развернуть и показать содержимое кликом. Пожалуйста, помогите