Empty Angular Boostrap fiddle

Angular 1.4.6 Bootstrap 3.3.6 Fontawesome 4.5.0

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
   You are using {{name}}
</div>

JavaScript

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

myApp.controller('MyCtrl', ['$scope', function($scope) {
	$scope.name = "Angular";
	$scope.ToExtract = 'pathB/pathC/pathD';
	$scope.test = 'pathA/pathB/pathC/pathD/data.json';
	
	$scope.extract = function(partToExtract, fullPath) {
		var index = fullPath.indexOf(partToExtract);
		alert(fullPath.substring(0, index) + fullPath.substring(index+partToExtract.length+1, fullPath.length));
	};
	
	$scope.extract($scope.ToExtract, $scope.test);
}]);