When/how often does code run in Javascript

I'm just trying different things to learn how javascript works, and I'm wondering why the following doesn't work.

I've got a function that toggles independent_color between "blue" and "red" on button click:

$scope.independent_color = "blue";

$scope.toggle_independent_color = function() {
    if ($scope.independent_color == "blue") {
        $scope.independent_color = "red"
    }
    else {
        $scope.independent_color = "blue"
    }
}

Then, I have some conditionals that set dependent_color based on the value of independent_color:

if ($scope.independent_color == "blue") {
    $scope.dependent_color = "blue"
}

else {
    $scope.dependent_color = "red"
}

However, when I toggle independent_color, the value of dependent_color does not change.

Here's a FIDDLE: http://ift.tt/1MuDOCw

My question is not how to get this to work. Rather, I'd like to know why it doesn't work. When/how often does the code run?