JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <select ng-model="selected_unit" ng-options="selected_unit for selected_unit in units" ng-change=update()></select>
        <div ng-repeat="cost in converted_costs">
            <p>{{cost.title}}: {{cost.value | currency}}</p>
        </div>
    </div>
</div>

JavaScript

var AppModule = angular.module('myApp', []);

AppModule.factory('AppService', function(){
    
   
    
    function convert(unit, value){
            if (unit === '/day') {
                cost = value*12/365;
            }
            else if (unit === '/month') {
                cost = value;
            }
            else if (unit === '/year') {
                cost = value*365;
            }
            return cost;
        }
    function convert_all(selected_unit, costs){
            converted_costs = angular.copy(costs);
            angular.forEach(costs,function(cost, key){
                converted_costs[key].value = convert(selected_unit, cost.value);
            });
            return converted_costs;
        }
    
                  
   var service =
    {
        convert: convert,
        convert_all: convert_all
    }
   
   return service;
});

AppModule.controller('AppCtrl', function($scope, AppService){
    $scope.units = ['/day', '/month', '/year'];
	$scope.selected_unit = $scope.units[1];
    $scope.costs = [{title:'Rent', value:800},{title:'Food', value:400}];
    $scope.converted_costs = AppService.convert_all($scope.selected_unit, $scope.costs); 
    $scope.update = function(){
        
    $scope.converted_costs = AppService.convert_all($scope.selected_unit, $scope.costs); 
        
    }    
});