How to get rid of extra js code?

Question

JavaScript

I have 2 types of buttons "Start / Stop" and "Quick start"
here are the functions that are responsible for their work
Function for the "Start / Stop" button

var isStart = true;
        $scope.buttonText = "Start";

        $scope.startOrStop = function() {
          if (isStart) {
            $scope.style = {
              background: 'red'
            };
            $scope.start();
            $scope.startTIME();
            isStart = false;
            $scope.buttonText = "Stop";
          } else {
            $scope.style = {
              background: '#11dc51'
            };
            $scope.stop();
            isStart = true;
            $scope.buttonText = "Start";
          }
        };

and this is the function for the "Quick Start" button

$scope.quickStart=function(tasks){
          if (isStart) {
            $scope.style = {
              background: 'red'
            };
            $scope.start();
            $scope.startTIME();
            $scope.tasks.name;
            isStart = false;
            $scope.buttonText = "Stop";
            $scope.currentTask.name=tasks.name;
            $scope.currentTask.selectedProject=tasks.selectedProject;

          } else {
            $scope.style = {
              background: 'red'
            };
            $scope.stop();
            var restart = $timeout($scope.quickStart, 100);
            $scope.currentTask.name=tasks.name;
            $scope.currentTask.selectedProject=tasks.selectedProject;
            isStart = true;
            $scope.buttonText = "Stop";
          }
        }

In general, the code is similar to each other, how to make it so as to reduce the extra code and look more concise?

Answer 1

1. Instead of styles, add css classes and change them using ng-class
2. Button text can also be changed in html by the value of the variable
3. Duplicate code in if else can be bracketed
4. Why the line $scope.tasks.name;
5. It is better to change the isStart variable in start() and stop()
6. controllerAs
...

Answer 2

Something like

tasks = {
    START: {
      name: 'Start',
      color: 'green',

    },
    STOP: {
      name: 'Stop',
      color: 'red',

    }
  };

  $scope.currentTask = tasks.STOP;

<button>{{currentTask.name}}</button>