Javascript ng更改干扰了chrome中的整个UI

我正在使用以下链接筛选我的菜单列表：-

我的菜单列表HTML是：-

<div class="nav-side-menu" id="menu-list">
    <div class="menu-list">
        <input type="text" name="" id="searchMenu" placeholder="SEARCH MENU" class="form-control" style="width:319px;height:30px;border-width:0px;border-radius:0px;font-weight:100;background-color: #454C50;color: #FFF;" ng-click="searchMenuList()" />
        <ul id="menu-content" class="menu-content collapse out">

            <li data-toggle="collapse" data-target="#markets" class="collapsed">
                <a href="#"><i class="fa fa-book fa-lg"></i> MARKETS <span class="arrow"></span></a>
            </li>

            <ul class="sub-menu collapse" id="markets">

                <li data-toggle="collapse" data-target="#abc" class="collapsed">
                    <a href="#"><i class="fa fa-book fa-lg"></i> MARKET LIST <span class="arrow"></span></a>
                </li>

                <ul class="sub-menu collapse" id="abc">
                    <li data-toggle="modal" data-target="#listA">
                        <a>List-A</a>
                    </li>

                    <li data-toggle="modal" data-target="#listB">
                        <a>List-B</a>
                    </li>
                </ul>

            </ul>

            <!--   and many more li elements -->

            <li data-toggle="collapse" data-target="#Products" class="collapsed">
                <a href="#"><i class="fa fa-book fa-lg"></i> Products <span class="arrow"></span></a>
            </li>

            <ul class="sub-menu collapse" id="Products">

                <li data-toggle="collapse" data-target="#xyz" class="collapsed">
                    <a href="#"><i class="fa fa-book fa-lg"></i> PRODUCTS LIST <span class="arrow"></span></a>
                </li>

                <ul class="sub-menu collapse" id="xyz">
                    <li data-toggle="modal" data-target="#listX">
                        <a>List-X</a>
                    </li>

                    <li data-toggle="modal" data-target="#listY">
                        <a>List-Y</a>
                    </li>
                </ul>

            </ul>

        </ul>
    </div>
</div>

列表-X


列表-Y

我的控制器代码是：-

    $scope.searchMenuList = function() {
      var input, filter, ul, li, a, i;
      input = document.getElementById('searchMenu');
      filter = input.value.toUpperCase();
      ul = document.getElementById("menu-content");
      li = ul.getElementsByTagName('li');
      for (i = 0; i < li.length; i++) {
          a = li[i].getElementsByTagName("a")[0];
          if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
              li[i].style.display = "";
          } else {
              li[i].style.display = "none";
          }
      }
  };

$scope.searchMenuList=function（）{
var输入、滤波器、ul、li、a、i；
输入=document.getElementById（'searchMenu'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“菜单内容”）；
li=ul.getElementsByTagName（'li'）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
};

我在这里面临两个问题：- 1.仅对第一个

li

元素进行过滤。表示它没有过滤

产品列表

。 2.它只在ng click上工作，而不在ng change上工作。当我将其更改为ng时，我的整个应用程序UI都会受到干扰

我无法理解为什么它对ng click有效，但对ng-change无效。有人能告诉我这里的问题吗