JSFiddle - React, Tailwind, and code Playground

by Sanjay Khadka

HTML

<body ng-app="mySettings">
    <div ng-controller="appSettingsCtrl">
        
        <h3>Inactivity Options:</h3> 
        This gives mm,ss,hh as option value for select combobox.<br>
        <select ng-model="inactivity_settings.time_format" ng-options="opt as opt.label for opt in timeFormatTemplates track by opt.value" ng-change="changedTimeFormat(inactivity_settings.time_format)"></select>
        The value selected is {{ inactivity_settings.time_format.value }}
        
        <br><br>
        <h3>Activity Options:</h3> 
        This gives 0,1,2 as option value for select combobox. <br>
        <select ng-model="activity_settings.time_format" ng-options="opt as opt.label for opt in timeFormatTemplates" ng-change="changedTimeFormat(activity_settings.time_format)"></select>
        The value selected is {{ activity_settings.time_format.value }}
            
        <br><br>
            As you can see, the value generated by both are same.
    </div>
</body>

JavaScript

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value) ie 900 seconds
        //time_format: 'ss', // second (default value)
        time_format: $scope.timeFormatTemplates[0], // default seconds object
    };
    
    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value) ie 900 seconds
        //time_format: 'ss', // second (default value)
        time_format: $scope.timeFormatTemplates[0], // default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});