JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="StockCtrl">
    <h2>Stock Checker</h2>
    <h3>Using a scoped function binding</h3>
    Current Stock Level: {{stockCountFunc()}} 
    <br>
    <h3>Using a direct property binding</h3>
    Current Stock Level: {{model.totalCount}} 
    <br><button ng-click="updateStock()">Update Stock</button>
</div>

<script>
var app = angular.module('myApp', [])
.service('StockService', function() {
    var StockModel = {};
    StockModel.model = {}; //change structure to object
    StockModel.model.totalCount = 5;

    StockModel.addStockItem = function() {
        //Some API call here to add a stock item...
        StockModel.model.totalCount++;
    };

    StockModel.getTotalCount = function () {
        return StockModel.model.totalCount;
    };

    return StockModel;
})
.controller('StockCtrl', function($scope, StockService) {
    $scope.stockCountFunc = StockService.getTotalCount;
    $scope.stockCountProp = StockService.totalCount;

    //this will provide you the two way binding thing as you are using dot rule
    $scope.model = StockService.model;

    $scope.updateStock = function() {
        StockService.addStockItem();
    };
});
</script>