单击时卡片中的AngularJs按钮无响应

Question

卡内的按钮无响应。我的目标是在单击每张卡的按钮时显示和隐藏小时。我已添加Javascript处理此功能，但似乎没有响应。当我在代码外部创建按钮时，按钮似乎可以正常运行并且脚本可以正常运行。我几乎已经尝试了以下所有内容，因此我所缺少的任何见解将不胜感激：

<style>
    .form-section {
        width: 321px;
        flex-wrap: wrap;
    }
</style>
<script type="text/javascript">
     $(document).ready(function() {

     $(".lebron").click(function () {
     $(".hi").hide();
     });
    $(".james").click(function () {
     $(".hi").show();
     });
    $(".k").click(function () {
     $(".hi").show();
     });
});



</script>
<script>

    $scope.showHours = function(){
    $('.hi').hide();
    };
</script>

<link href="//@System.Configuration.ConfigurationManager.AppSettings["CDNBase"]/Content/themes/OpenCart/stylesheet.min.css" rel="stylesheet" /> <!--@@sk updated at 06/03/2018-->
<link href="//@System.Configuration.ConfigurationManager.AppSettings["CDNBase"]/Content/themes/OpenCart/typo.min.css" rel="stylesheet" />@*sk updated at 06/03/2018*@


<div class="container" style="background-color:blue;" ng-controller="StoreController" ng-cloak>

    <img src="../images/StoreLocations/locationsPageBanner.jpg" style="padding-bottom: 25px">


    <div class='md-padding' layout="row" layout-wrap style="">

        <md-content class="md-padding" layout="row" layout-wrap ng-repeat="store in lstStores.data" style="background-color:pink;">

            <md-card class="form-section">



                <md-card-header style="background-color: dodgerblue; font-size:21px; color: white">
                    <md-card-header-text>
                        <md-card-header-text class="md-title" ng-bind="store.storeDisplayLink | uppercase"></md-card-header-text>
                        <md-card-header-text class="md-subhead" , style="color: lightgrey"> <span ng-bind="store.StoreCity"> city,state </span></md-card-header-text>
                    </md-card-header-text>
                </md-card-header>


                <md-card-content>
                    <div>
                        <p>
                            <ng-bind-html ng-bind-html="store.StoreAddress"></ng-bind-html>
                        </p>
                        <p>
                            @*<a target="_self" ng-href="/Location/store/{{store.storeId}}">Get Map</a><br />*@

                            <span ng-if="isMobile == true"><a href="tel:{{store.storeMainPhone | EliminateSpaces}}"> {{store.storeMainPhone | uppercase}} </a></span> <span ng-if="isMobile == false">{{store.storeMainPhone | uppercase}}</span>
                            <br />
                            <br />


                            <button class="hours" style="width:110px" ng-click="showHours()">
                                Store Hours
                            </button>

                            <div class="Hours">
                                <ng-bind-html ng-bind-html="store.StoreHours"></ng-bind-html>
                            </div>

                            <br />
                            <a target="_self" ng-href="/{{store.storeDisplayUrl}}" style="font-weight: 700;color: black;text-decoration: none;font-size: 16px;">Get Map</a>
                            <a href="/Location/Index" target="_self" class="location-icon-333 "></a>
                        </p>
                    </div>
                </md-card-content>


            </md-card>
        </md-content>
    </div>

</div>