我想将我的jQuery脚本更改为angular js

Question

这是我的代码，它工作正常，我希望角度相同

css就在这里

.hide{
display: none;
  }
ul.menu-list li a.selected{
background-color: dimgrey;
}

HTML就在这里

<ul class="menu-list">
<li><a id="menu-add-category" class="selected">Add Category</a></li>
<li><a id="menu-add-type" class="deselected">Add Type</a></li>
</ul>
       <div id="add-category" class="show form">
            <form method="post" action="">
                <label>Add Category :</label>
                <input type="text" name="category" placeholder="category"/>
            </form>
        </div>

        <div id="add-type" class="hide">
            <form method="post" action="">
            <label>Category :</label>
            <input type="text" name="category" placeholder="category"/>
            <label>Types :</label>
            <input type="text" name="type" placeholder="type"/><br><br>
            </form>
        </div>

jQuery就在这里

 <script>
 $('#menu-add-category') .on('click', function () {
    $('#add-category').removeClass('hide');
    $('#add-category').addClass('show');
    $('#add-type').removeClass('show');
    $('#add-type').addClass('hide');
    $(this).removeClass('deselected');
    $(this).addClass('selected');
    $('#menu-add-type').removeClass('selected');
    $('#menu-add-type').addClass('deselected');
    });

 $('#menu-add-type') .on('click', function () {
    $('#add-type').removeClass('hide');
    $('#add-type').addClass('show');
    $('#add-category').removeClass('show');
    $('#add-category').addClass('hide');
    $(this).removeClass('deselected');
    $(this).addClass('selected');
    $('#menu-add-category').removeClass('selected');
    $('#menu-add-category').addClass('deselected');
  });
 </script>

我是用jQuery编写的代码，请你帮我用角度来做同样的事。实际上，我想知道如何为两个类使用toggle-class