JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="RecipesCtrl" ng-app="myApp">
    <div id="main" data-role="page">
        <fieldset class="ui-block-a">
            <input type="checkbox" id="checked" 
                ng-model="viewAll"
                ng-click="setAllFilters(viewAll)"
                ng-checked="areAllFiltersOn()">
            <label for="checked">View All-{{areAllFiltersOn()}}</label>
        </fieldset>
        <fieldset ng-repeat="filter in filters">
            <input type="checkbox" id="checked" ng-model="filter.checked">
            <label for="checked">{{filter.name}}-{{filter.checked}}</label>
        </fieldset>
    </div>

</div>

CSS

.ui-input-text,
.ui-select {
    width: 100% !important;
    padding: 0.4em 0 !important;
}
</style>
        <title>TodoMobile</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
        <script src="https://github.com/tigbro/jquery-mobile-angular-adapter/raw/master/compiled/jquery-mobile-angular-adapter-standalone-1.0.7-rc3-SNAPSHOT.js" type="text/javascript"></script> 
        <link href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" rel="stylesheet" type="text/css">
<style>

JavaScript

angular.module('myApp',[]);

function RecipesCtrl($scope) {
    $scope.recipes = [];
    $scope.filters = [
        {name: 'Soup'},
        {name: 'Salad'},
        {name: 'Sandwich'},
        {name: 'Casserole'},
        {name: 'Pastas'}
    ];
    $scope.viewAll = true;// Start with all viewed by default

    $scope.setAllFilters = function(newValue) {
        console.log('setAllFilters',newValue);
        angular.forEach($scope.filters, function(f) {
            f.checked = newValue;
        });
    };
        
    $scope.areAllFiltersOn = function() {
        var allFiltersAreOn = true;    
        angular.forEach($scope.filters, function(f) {
            if (f.checked===false) allFiltersAreOn=false;
        });
        return allFiltersAreOn;
    };
}