JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="serviceApp" ng-controller="ServiceCtrl">
    title: <input type="text" ng-model="marker.title"><br>
    description: <input type="text" ng-model="marker.description"><br>
        <button type="button" ng-click="addMarker()">ADD MARKER</button>
    <p>
        {{ markers }}
    </p>
</div>

JavaScript

angular.module('serviceApp', [])
.factory('Marker', function () {
    function Marker() {
        this.title = '';
        this.descrpition = '';
    }
    
    // use setters and getters if  you want to make your variable private
    // in this example we are not using these functions
    Marker.prototype.setTitle = function (title) {
        this.title = title;
    };
    
    Marker.prototype.setDescription = function (description) {
        this.description = description;    
    };
    
    return Marker;
})
.service('markerService', function (Marker) {
  this.markers = [];
    this.getNewMarker = function () {
        return new Marker();
    }
    this.addMarker = function (marker) {
        this.markers.push(marker);
    }
  
})
.controller('ServiceCtrl', function ($scope, markerService) {
    $scope.marker = markerService.getNewMarker();
    $scope.addMarker = function () {
        markerService.addMarker($scope.marker);
        $scope.marker = markerService.getNewMarker();
    }
    $scope.markers = markerService.markers;
});