AngularJSでng-repeat時に、ng-clickしたらhideされている要素を表示したい

Angularjs1.3.0

下記のようなlist配列をループで回した際に、div要素をng-clickすることで
元々非表示になっているspan要素を表示させたいと考えています。
またクリックされた要素自体はng-hideにより非表示にします。
本家のstackoverflowに参考になりそうなコードがあったので組み込んでみましたが、そちらは表示されているものを非表示にするといった処理のため希望と異なっていました。

下記のコードを実行すると、クリックされたdiv自体は非表示になるのですが、非表示状態のspanは表示されません。
どのようにしたらよいでしょうか？

<div ng-repeat="(index, value) in list">
    <div ng-hide="showDetails" ng-click="showDetails = ! showDetails">タップすると消えます</div>
    <span ng-hide="true" ng-show="!showDetails">非表示TEST index:{{$index}}</span>
</div>

---

提示いただいたコードで無事目的の結果が出ました。
ありがとうございました。

なお、1つ気になった点ですが、こちらに投稿するためにシンプルなコードを載せたのですが、本来の開発中のコードは下記のようにng-ifディレクティブを使って条件によってDOMの存在自体を制御していたのですが、この場合だとdiv要素が消えたときにspan要素が表示されないです。

var app=angular.module("app",[]);
    app.controller("AppCtrl", function($scope){
      $scope.list = [1,2,3,4];
      $scope.view_flag = true;
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
  <div ng-repeat="(index, value) in list">
    <div ng-if="view_flag" ng-hide="showDetails" ng-click="showDetails = ! showDetails">
      タップすると消えます
    </div>
    <span ng-if="view_flag" ng-hide="!showDetails" ng-show="!showDetails">非表示TEST index:{{$index}}</span>
  </div>
</div>

ng-showと併用するとクリックイベント発生させたdiv要素が消えた瞬間に表示させたいspan要素も消えてしまう現象が起きました。
これが今回はまっていた原因なのですが「ng-if」と「ng-show,ng-hide」の組み合わせで起きているので、そもそもng-ifによるDOM要素自体の作成・削除がng-showなどによる単なるshow,hideの切り替えと合っていないのでしょうか。

根本的な理解が出来ておらず申し訳ありません。