angularjs - ページ上の任意の場所をクリックすると、ラジオ ボタンの選択が解除されます

Question

Angular で通常のラジオ ボタンの代わりにセグメント化されたコントロール ボタンを実装しようとしていますが、CSS クラスを削除すると、通常のラジオ ボタンは正常に機能し、同じページの任意の場所をクリックして別のページに移動しても選択されたままになりますが、CSS を追加した後、ラジオボタンの選択はそのままではなく、選択を解除します。

これを手伝ってください

HTML コード :

<div class ="segmented-control">
            <div ng-repeat="p in LP">
                <a href="#" class="list-group-item">
                    <label> {{p.label}}
                        <input type ="radio" ng-model="test" name="test" value="{{p.value}}" ng-click="getElement($event)"></label>
                </a>
            </div>
          </div>

CSS :

.segmented-control input[type="radio"] {
    visibility:hidden;
}

.segmented-control .list-group-item {
    display: inline-block;
}

controller.js で以下の関数を呼び出して、ラジオ ボタンの値を取得します。

$scope.getElement= function(obj){

$scope.test = obj.target.value;
}