How to write angular code instead of jquery?

Whenever there is any operation related to dom, the best option is to create a directive(Also it is reusable). Like here toggle-me

<div id="add" class="modal category modal-fixed-footer">
    <div class="modal-content">
        <h4>Categories</h4>
        <div class="wrapper">
            <ul class="collection main first-level">
                <!-- FIRST LEVEL ITEM (WOMEN) -->
                <li class="collection-item">
                    <span class="item-wrapper" toggle-me>
                            <span>Women<i class="material-icons">arrow_drop_down</i></span>
                    </span>
                    <p class="checkbox">
                        <input type="checkbox" class="filled-in" id="1" />
                        <label for="1"></label>
                    </p>
                    <ul class="collection second-level">
                        <!-- SECOND LEVEL ITEM -->
                        <li class="collection-item ">
                            <span class="item-wrapper" toggle-me>
                                    <span>Women's Clothing<i class="material-icons">arrow_drop_down</i></span>
                            </span>
                            <p class="checkbox">
                                <input type="checkbox" class="filled-in" id="2" />
                                <label for="2"></label>
                            </p>
                            <ul class="collection third-level">
                                <!-- SECOND LEVEL ITEM -->
                                <li class="collection-item"><span class="item-wrapper">Blazers </span>
                                    <p class="checkbox">
                                        <input type="checkbox" class="filled-in" id="3" />
                                        <label for="3"></label>
                                    </p>
                                </li>
                                <li class="collection-item"><span class="item-wrapper">Jeans </span>
                                    <p class="checkbox">
                                        <input type="checkbox" class="filled-in" id="6" />
                                        <label for="6"></label>
                                    </p>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect  btn-flat ">Save</a>
        <a href="#!" class="modal-action modal-close waves-effect  btn-flat ">Cancel</a>
    </div>
</div>

Angular code

angular.module('App', [])
    .directive('toggleMe', function() {
        return {
            restrict: 'E',
            link: function(scope, ele, attr) {
                ele.on('click', function() {
                    ele.next('.collection').slideToggle('medium');
                    ele.next().next('.collection').slideToggle('medium');

                    var icon = ele.find('i').text();
                    if (icon === 'arrow_drop_up') {
                        ele.find('i').text('arrow_drop_down');
                    } else {
                        ele.find('i').text('arrow_drop_up');
                    }
                });
            }
        };
    });

Here in directive you can add logic as per your requirement.