How to change Angular-UI element property with Jquery

Question

I'm trying to have a simple accordion with two buttons at the top: one button that opens every panel and one that collapses them.

I'm trying to use jQuery's prop method to alter the is-open property on each uib-accordion element, but nothing happens when I click on either button.

<div ng-controller="AccordionController">
    <p>
        <button type="button" class="btn btn-default btn-sm" ng-click="openAll()">Open All</button>
        <button type="button" class="btn btn-default btn-sm" ng-click="collapseAll()">Collapse All</button>
    </p>
    <uib-accordion close-others="false">
        <uib-accordion-group class="accordionGroup" ng-repeat="xmlResult in xmlResults" is-open="false">
            <uib-accordion-heading>
                //heading...
            </uib-accordion-heading>
            //content...
        </uib-accordion-group>
    </uib-accordion>
</div>

Here is my controller

angular.module("ResultsTreeViewer").controller("AccordionController", function ($scope) {

    $scope.openAll = function () {
        $(".accordionGroup").prop("is-open", true);
    };
    $scope.collapseAll = function () {
        $(".accordionGroup").prop("is-open", false);
    }
});

I'd love an Angular only solution but that isn't necessary. I just want it to work.

Answer 1

I'll say that don't use jQuery with Angular, inside controller.

Rather have isOpen variable inside each accordion record and then make it true & false by calling single function actionAccordion function(Make sense to have it in angular way).

Markup

<p>
    <button type="button" class="btn btn-default btn-sm" ng-click="actionAccordion(true)">Open All</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="actionAccordion(false)">Collapse All</button>
</p>
<uib-accordion close-others="false">
    <uib-accordion-group class="accordionGroup" ng-repeat="xmlResult in xmlResults" 
      is-open="xmlResult.isOpen">
        <uib-accordion-heading>
            //heading...
        </uib-accordion-heading>
        //content...
    </uib-accordion-group>
</uib-accordion>

Code

$scope.actionAccordion = function (flag) {
    angular.forEach($scope.xmlResults, function(xmlResult){
        xmlResults.isOpen = flag;
    })
};