angular单选选中不变色的坑

在一次学校项目中，我在表单里面添加一个单选功能，但是当选择的时候单选按钮并不变色（变为黑色），我查看了ng-model发现是取到value值了的，所以遇到坑了...

代码如下：

<li class="list-group-item row">
            <a href="">
                <div class="col-xs-4">性别</div>
                <div class="col-xs-8" style="text-align: left;">
                    <input type="radio" ng-model="a" value="1">男
                    <input type="radio" ng-model="a" value="2">女
                    {{a}}
                    <!-- <input type="radio" name="sex" ng-model="sex" checked="checked" id="man" ng-value="man" style="margin-right: 3px;">
                    <label for="man">男</label>
                    <input type="radio" name="sex" ng-model="sex" id="woman" ng-value="woman" style="margin-left: 20px;margin-right: 3px;">
                    <label for="woman">女</label> -->
                </div>
            </a>
        </li>

效果是：

会发现，我选中了女，ng-model="a" 的a也为2了，但是按钮没有变色....最后我仔细检查了代码没有错误，然后注释了代码，只留下了这段单选代码，发现就没有这个bug了，所以应该是和页面上一些标签冲突了或者什么的....我将单选代码放在不同的位置查看是否可行最后发现了......

代码如下：

<li class="list-group-item row">
            <input type="radio" ng-model="a" value="1">男
            <input type="radio" ng-model="a" value="2">女
            {{a}}
            <a href="">
                <div class="col-xs-4">性别</div>
                <div class="col-xs-8" style="text-align: left;">

                    <!-- <input type="radio" name="sex" ng-model="sex" checked="checked" id="man" ng-value="man" style="margin-right: 3px;">
                    <label for="man">男</label>
                    <input type="radio" name="sex" ng-model="sex" id="woman" ng-value="woman" style="margin-left: 20px;margin-right: 3px;">
                    <label for="woman">女</label> -->
                </div>
            </a>
        </li>

将单选代码放在a标签里面就不能实现效果，其实有些人认为可以不要这个a标签的，是的，我也是忙昏了头，这段代码是我从另一个表单截过来的，为了省事，尽管感觉自己被自己耍了，但是我最终解决了这个问题，发现了这个坑，我也是认了，因为我下次会更加小心！ 0.0